I'm working on a project where I need to change existing Boostrap2 table responsive. I made a fiddle
<table class="table head center">
<caption></caption>
<tr>
<th scope="col">Member</th>
<th scope="col">Date</th>
<th scope="col">Usage</th>
<th scope="col">Native</th>
<th scope="col">Coverage</th>
<th scope="col"></th>
</tr>
<tr id="members-repeat-container" ng-repeat="">
<td>You</td>
</tr>
</table>
This is all there is to it. A wrapper:
#media screen and (max-width: 767px) {
.responsive-table {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
}
}
#media screen and (max-width: 767px) {
.responsive-table {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<div class="responsive-table">
<table class="table head center">
<caption></caption>
<tr>
<th scope="col">Member</th>
<th scope="col">Date</th>
<th scope="col">Usage</th>
<th scope="col">Native</th>
<th scope="col">Coverage</th>
<th scope="col"></th>
</tr>
<tr id="members-repeat-container" ng-repeat="">
<td>You</td>
<td>
<input name='age' class="member-birthday input-small" ng-class="member.preloaded" type="text" name="birthdate##$index + 1##" id="birthdate##$index+1##" placeholder="mm/dd/yyyy" ui-mask="99/99/9999" ui-mask-use-viewvalue="true" ng-model="member.birthday" date-check mtype="##member.type##" order="##$index##" popover="##member.errorMsg##" trigger-click="##member.errorMsg##" popover-trigger="blur" popover-placement="right" required test-check="##$index##">
</td>
<td>
<label for="tobacco## member.id ##" class="aria-hidden hide">Usage
</label>
<input class="tobacco-input" type="checkbox" name="tobacco## member.id ##" id="tobacco## member.id ##" ng-disabled="member.disableTobacco" />
</td>
<td>
<label for="nativeAmerican## member.id ##" class="aria-hidden hide"> Native
</label>
<input class="coverage-input" type="checkbox" name="nativeAmerican## member.id ##" id="nativeAmerican## member.id ##" ng-model="member.nativeAmerican"/>
</td>
<td>
<label for="coverage## member.id ##" class="aria-hidden hide">
Coverage
</label>
<input class="coverage-input" type="checkbox" name="coverage## member.id ##" id="coverage## member.id ##" ng-model="member.seekingCoverage" ng-click="seekCoverage($index)"/>
</td>
<td class="removebtn">
<a href="javascript:void(0);" ng-show="member.removable" ng-click="remove($index, member.type)" class="btn btn-mini">
<spring:message code="label.iex.prescreen.remove" javaScriptEscape="true"/>
</a>
</td>
</tr>
</table>
</div>
I changed the structure and added some grid classes from Bootstrap3. I got the expected result
Related
I wish to get table that looks like this:
Blue element is auto generated table in main table.
Problem is that i don't now how to keep columns. Best i can do is:
My html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<table class="table table-bordered">
<thead>
<th>
Date
</th>
<th>
Zm
</th>
<th>
Service
</th>
<th>
Pozition
</th>
<th >
Operation
</th>
<th >
Material Typ
</th>
<th >
Batch and weight
</th>
<th>
Output length
</th>
</thead>
<tbody>
<tr>
<td>
2021-03-28
</td>
<td>
I
</td>
<td>
<input type="text" style="width: 90px;"> <br>
<input type="text" style="width: 90px;">
</td>
<td>
1
</td>
<td colspan="3">
<table>
<tr>
<td>
Izol
</td>
<td>
LS4201R
</td>
<td>
<input type="text"> <br>
<input type="text"> <br>
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<input type="text"><br>
<input type="text"><br>
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>
EkWZ
</td>
<td>
LE0592
</td>
<td>
<input type="text"><br>
<input type="text"><br>
<button type="submit">Submit</button>
</td>
</tr>
</table>
</td>
<td>
2530
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
2
</td>
<td colspan="3">
<table>
<tr>
<td>
Izol
</td>
<td>
LS4201R
</td>
<td>
<input type="text"> <br>
<input type="text"> <br>
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<input type="text"><br>
<input type="text"><br>
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>
EkWZ
</td>
<td>
LE0592
</td>
<td>
<input type="text"><br>
<input type="text"><br>
<button type="submit">Submit</button>
</td>
</tr>
</table>
</td>
<td>
3020
</td>
</tr>
</tbody>
</table>
</body>
</html>
Styling is from another answer on the portal, but i don't now how remove space between main table and nested.
Can some one help me whit styling? I'm learning python and don't now JS
You will have to remove the padding in the columns that has a sub table and have some fixed width on the columns.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
vertical-align: top;
}
.table-inner td {
padding: 0;
}
.table-inner {
border: none;
}
.table-inner tr:first-child td {
border-top: none;
}
.table-inner tr:last-child td {
border-bottom: none;
}
.table-inner td:first-child {
border-left: none;
}
.table-inner td:last-child {
border-right: none;
}
.table-responsive {
display: block;
overflow-x: auto;
width: 100%;
}
.no-border {
border: none;
}
.p-0 {
padding: 0 !important;
}
input[type=text] {
width: 100%;
}
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th style="min-width: 120px; width: 120px">Date</th>
<th style="min-width: 80px;width: 80px">Zm</th>
<th style="min-width: 90px;width: 90px">Service</th>
<th style="min-width: 80px;width: 80px">Pozition</th>
<th style="min-width: 150px;width: 150px">Operation</th>
<th style="min-width: 150px;width: 150px">Material Typ</th>
<th style="min-width: 170px; width: 170px">Batch and weight</th>
<th style="width: auto">Output length</th>
</tr>
</thead>
<tbody>
<tr>
<td>2021-03-28</td>
<td>I</td>
<td class="p-0">
<input type="text" style="width: 90px;"><br />
<input type="text" style="width: 90px;">
</td>
<td>1</td>
<td colspan="3" class="p-0">
<table class="table-inner">
<tbody>
<tr>
<td style="min-width: 160px;width: 160px">Izol</td>
<td style="min-width: 160px;width: 160px">LS4201R</td>
<td style="min-width: 170px;width: 170px">
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>EkWZ</td>
<td>LE0592</td>
<td>
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
</tbody>
</table>
</td>
<td>2530</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>2</td>
<td colspan="3" class="p-0">
<table class="table-inner">
<tbody>
<tr>
<td style="min-width: 160px;width: 160px">Izol</td>
<td style="min-width: 160px;width: 160px">LS4201R</td>
<td style="min-width: 170px;width: 170px">
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>EkWZ</td>
<td>LE0592</td>
<td>
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
</tbody>
</table>
</td>
<td>3020</td>
</tr>
</tbody>
</table>
</div>
I have these textboxes,
looks fine in when the browser is maximized but in mobile or when you minized the below textbox overlap the above textbox.
I'm using the below syntax:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<center>
<div class="mrQuestionText">
<style>
.mrNext {
min-width: 15em
}
</style>
<div class="mrInstruct"></div>
<table class="mrQuestionTable" role="presentation">
<tbody>
<tr class="odd">
<th class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</th>
<td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
</tr>
<tr class="even">
<th class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</th>
<td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
</tr>
</tbody>
</table>
</div>
</center>
</body>
</html>
Apologies, as I can't share the full syntax.
Kindly advise if there is any property that i should add/update.
Try adding the following for table
border-spacing: 5px (spacing u wish)
I have updated your code, you were missing a semicolon here min-width: 15em. Also you need to restructure your code.
Since I am not able to reproduce the issue, I suggest you to use the below updated styles. I have used border-spacing below, try that.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.mrNext {
min-width: 15em;
}
.mrQuestionTable {
border-collapse: separate;
}
.mrQuestionTable tr{
border-spacing: 10px;
}
</style>
</head>
<body>
<center>
<div class="mrQuestionText">
<div class="mrInstruct"></div>
<table class="mrQuestionTable" role="presentation">
<tbody>
<tr class="odd">
<th class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</th>
<td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
</tr>
<tr class="even">
<th class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</th>
<td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
</tr>
</tbody>
</table>
</div>
</center>
</body>
</html>
You add white-space: nowrap; for 1st column
and th -must be only in the thead section
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<center>
<div class="mrQuestionText">
<style>
.mrGridCategoryText{white-space: nowrap;}
.mrNext {
min-width: 15em;
}
</style>
<div class="mrInstruct"></div>
<table class="mrQuestionTable" role="presentation">
<tbody>
<tr class="odd">
<td class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</td>
<td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
</tr>
<tr class="even">
<td class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</td>
<td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
</tr>
</tbody>
</table>
</div>
</center>
</body>
</html>
You need to use padding on your td elements in the media query.
html
<table class="mrQuestionTable" role="presentation">
<tbody>
<tr class="odd">
<td class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</td>
<td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
</tr>
<tr class="even">
<td class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</td>
<td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
</tr>
</tbody>
</table>
css
#media only screen and (min-width: 320px) and (max-width: 768px){
.mrQuestionTable tbody tr td {
padding-bottom: 1em;
}
}
There is a responsive table which I want to display on mobile devices. The problem is the rightmost column which contains radios is too close to the edge of the screen. Therefore, I add a margin-right to it. However, the margin disappears when I open the page on mobile devices. Adding an empty column would make the table weird. Is there any other way to give a margin to a responsive table on mobile devices? I just do not want the rightmost column too close to the edge.
<meta name="viewport" content="width=device-width, initial-scale=1">
<form ng-submit="submit()">
<div class="table-responsive">
<table class="table table-striped table-bordered">
css:
#media only screen and (max-width: 600px) {
.table-responsive{
margin-right: 5rem !important;
}
}
html:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>中国工程院无线投票系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/vote.css">
</head>
<body ng-app="vote" ng-controller="vote_ctrl" ng-init="init()" ng-show="is_start">
<h2 class="sub-header">
<span ng-bind="voteData.department"></span>第<span ng-bind="voteData.round"></span>轮
<span ng-bind="voteData.group"></span><span ng-bind="voteData.vote_type"></span>第
<span ng-bind="voteData.times"></span>次
</h2>
<form ng-submit="submit()">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th rowspan="2">提名书号</th>
<th rowspan="2">姓名</th>
<th rowspan="2">年龄</th>
<th rowspan="2">学科专业</th>
<th rowspan="2">工作单位</th>
<th colspan="3" ng-if="voteData.ballot_type =='记分'">圈选栏</th>
<th colspan="2" ng-if="voteData.ballot_type =='表决'">圈选栏</th>
</tr>
<tr>
<th ng-if="voteData.ballot_type =='记分'">A</th>
<th ng-if="voteData.ballot_type =='记分'">B</th>
<th ng-if="voteData.ballot_type =='记分'">C</th>
<th ng-if="voteData.ballot_type =='表决'"><i class="glyphicon glyphicon-ok"></i></th>
<th ng-if="voteData.ballot_type =='表决'"><i class="glyphicon glyphicon-remove"></i></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in voteData.candidates">
<td>{{item.candidate_num}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.major}}</td>
<td>{{item.company}}</td>
<td ng-if="voteData.ballot_type =='记分'">
<input type="radio" name="{{item}}" ng-model="item.score" value="3" required>
</td>
<td ng-if="voteData.ballot_type =='记分'">
<input type="radio" name="{{item}}" ng-model="item.score" value="2" required>
</td>
<td ng-if="voteData.ballot_type =='记分'">
<input type="radio" name="{{item}}" ng-model="item.score" value="1" required>
</td>
<td ng-if="voteData.ballot_type =='表决'">
<input type="radio" name="{{item}}" ng-model="item.score" value="1" required>
</td>
<td ng-if="voteData.ballot_type =='表决'">
<input type="radio" name="{{item}}" ng-model="item.score" value="0" required>
</td>
</tr>
</tbody>
</table>
</div>
<button type="submit" class="btn btn-success btn-lg center-block">提交</button>
</form>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="js/vote.js"></script>
</body>
</html>
This works fine without #media only... on desktop but it does not work on mobile devices.
Now may it usefull for you!..
#media only screen and (max-width: 500px) {
.table-bordered{
margin-left:20px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th rowspan="2">提名书号</th>
<th rowspan="2">姓名</th>
<th rowspan="2">年龄</th>
<th rowspan="2">学科专业</th>
<th rowspan="2">工作单位</th>
<th colspan="3" ng-if="voteData.ballot_type =='记分'">圈选栏</th>
<th colspan="2" ng-if="voteData.ballot_type =='表决'">圈选栏</th>
</tr>
<tr>
<th ng-if="voteData.ballot_type =='记分'">A</th>
<th ng-if="voteData.ballot_type =='记分'">B</th>
<th ng-if="voteData.ballot_type =='记分'">C</th>
<th ng-if="voteData.ballot_type =='表决'"><i class="glyphicon glyphicon-ok"></i></th>
<th ng-if="voteData.ballot_type =='表决'"><i class="glyphicon glyphicon-remove"></i></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in voteData.candidates">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td ng-if="voteData.ballot_type =='记分'">
<input type="radio" name="{{item}}" ng-model="item.score" value="3" required>
</td>
<td ng-if="voteData.ballot_type =='记分'">
<input type="radio" name="{{item}}" ng-model="item.score" value="2" required>
</td>
<td ng-if="voteData.ballot_type =='记分'">
<input type="radio" name="{{item}}" ng-model="item.score" value="1" required>
</td>
<td ng-if="voteData.ballot_type =='表决'">
<input type="radio" name="{{item}}" ng-model="item.score" value="1" required>
</td>
<td ng-if="voteData.ballot_type =='表决'">
<input type="radio" name="{{item}}" ng-model="item.score" value="0" required>
</td>
</tr>
</tbody>
</table>
</div>
<style>
#media only screen and (max-width: 600px) {
.table-responsive .table-striped{
width: 100% !important;
max-width: 95% !important;
margin: 10px auto !important;
}
.table-responsive
{
width: 100% !important;
max-width: 95% !important;
margin: 10px auto !important;
}
}
</style>
I want to do some things with my table but I think an image would sum it up as my english is not the best.
I want to first move the second button to the left. Just one button on each corner on top of my table.
And secondly I want to avoid my input textbox (or a button later) to resieze the whole row of the 2nd header.
Any help will do. I can't figure it out by myself.
Code
#Html.ActionLink("Reset filters", "Index",
null,
new { #class = "btn btn-success custom", #style = "color:white", #role = "button" }
)
<button class="btn btn-default custom" type="submit"><i class="glyphicon glyphicon-file"></i> Export to Excel</button>
<div style="padding-top: 12px"></div>
#using (Html.BeginForm("Index", "Materials", FormMethod.Get))
{
<div id="grid-list">
#{ Html.RenderPartial("_AjaxMaterialList", Model); }
</div>
}
Partial View Code
#using PagedList.Mvc <!--import this so we get our HTML Helper-->
#model IPagedList<eContentMVC.Models.Material>
<!-- import the included stylesheet for some (very basic) default styling -->
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
#*<div style="padding-top: 14px"></div>*#
<div class="panel panel-primary filterable" style="padding: 0px;
margin: 0px">
<div class="panel-heading">
<h3 class="panel-title">GDS eContent Master Data Service Tool</h3>
</div>
<table class="table table-bordered table-hover" style="width:100%">
<thead>
<tr>
<th class="centerAlign" style="width:14%">Brand</th>
<th class="centerAlign" style="width:25%">Category</th>
<th class="centerAlign" style="width:13%">Language</th>
<th class="centerAlign" style="width:7%">BCO</th>
<th class="centerAlign" style="width:9%">Material Cod</th>
<th class="centerAlign" style="width:7%">Derivation</th>
<th class="centerAlign" style="width:7%">Artwork</th>
<th class="centerAlign" style="width:7%">Delivery</th>
<th class="centerAlign" style="width:5%">Export</th>
</tr>
<tr>
<th class="centerAlign" style="height:4%"><input type="text" /></th>
<th class="centerAlign"><input type="text" /></th>
<th class="centerAlign"><input type="text" /></th>
<th class="centerAlign"><input type="text" /></th>
<th class="centerAlign"><input type="text" /></th>
<th class="centerAlign"><input type="text" /></th>
<th class="centerAlign"><input type="text" /></th>
<th class="centerAlign"><input type="text" /></th>
<th class="centerAlign"><input type="text" /></th>
</tr>
</thead>
<tbody>
// Content
</tbody>
</table>
</div>
<div class="centerAlign" style="padding: 0px; margin: -8px">
<!-- output a paging control that lets the user navigation to the previous page, next page, etc -->
#Html.PagedListPager(Model, page => Url.Action("Index", "Materials", new
{
brand_name = Request["brand_name"],
page
}))
</div>
This is the code for making the table looking the right way. For the button, use bootstrap's pull-right.
* {
box-sizing:border-box;
}
.mytable tr th{
height:42px;
}
.mytable input{
width:100%;
}
.mytable th:nth-of-type(1){
width:14%;
}
.mytable th:nth-of-type(2){
width:25%;
}
.mytable th:nth-of-type(3){
width:13%;
}
.mytable th:nth-of-type(4),.mytable th:nth-of-type(6),.mytable th:nth-of-type(7),.mytable th:nth-of-type(8){
width:7%;
}
.mytable th:nth-of-type(5){
width:9%;
}
.mytable th:nth-of-type(9){
width:5%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="panel panel-primary filterable">
<div class="panel-heading">
<h3 class="panel-title">GDS eContent Master Data Service Tool</h3>
</div>
<table class="table table-bordered table-hover mytable">
<thead>
<tr>
<th class="centerAlign">Brand</th>
<th class="centerAlign">Category</th>
<th class="centerAlign">Language</th>
<th class="centerAlign">BCO</th>
<th class="centerAlign">Material Cod</th>
<th class="centerAlign">Derivation</th>
<th class="centerAlign">Artwork</th>
<th class="centerAlign">Delivery</th>
<th class="centerAlign">Export</th>
</tr>
<tr>
<th class="centerAlign">
<input type="text" />
</th>
<th class="centerAlign">
<input type="text" />
</th>
<th class="centerAlign">
<input type="text" />
</th>
<th class="centerAlign">
<input type="text" />
</th>
<th class="centerAlign">
<input type="text" />
</th>
<th class="centerAlign">
<input type="text" />
</th>
<th class="centerAlign">
<input type="text" />
</th>
<th class="centerAlign">
<input type="text" />
</th>
<th class="centerAlign">
<input type="text" />
</th>
</tr>
</thead>
</table>
</div>
<div class="centerAlign" style="padding: 0px; margin: -8px"></div>
If it helps, +1.
Without the real page i'm not sure, but:
To move the button on the right use bootstrap class pull-right.
To have every row at the same height. I think td have some padding inside. Put padding to 0 and fix the height in css
.table td {
height: 30px;
vertical-align: middle;
}
Or something like this
HTML
<table class="table " >
<thead >
<tr>
<th>
Product
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody >
<tr>
<td >
torch
</td>
<td>
<input type="text" class="form-control" id="amountC" name="amountC" autocomplete='off' style="outline: none;
border:none !important;
box-shadow:none !important;">
</td>
</tr>
</tbody>
<thead>
<tr>
<th>
<input type="text" style="float:left" name="" id="couo" placeholder="hi" class="form-control" />
</th>
<th>
<div>
<input type="button" style="padding:5px 12px" name="btnC" id="btnC" class='btn btn-info' value="coupon" />
</div>
</th>
</tr>
<tr>
<th>
Amount to be paid
</th>
<th>
<input type="text" class="form-control" id="amountT" name="amountT" autocomplete='off' style="outline: none;
border:none !important;
box-shadow:none !important;"> </th>
</tr>
</thead>
</table>
I have this HTML in which there are borders in this table.I want to completely remove all the borders inside the table.I tried editing the css.But I cant do that..
here is the fiddle
did u tried this
<style>
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
border: none!important;
}
</style>
this must help you
check this http://jsfiddle.net/spk063/Gz49L/4/