I got two tables as this:
I want them to have the same width, I don't know what it's called but you can see that the columns dosn't have the same width.
Here is my code for it:
<aside>
<table class="table table-bordered" style="margin: 0;">
<thead>
<tr></tr>
<tr></tr>
</thead>
<tbody>
<tr>
<td class="tableHeader">Pilot ID</td>
<td><?php echo 'SAS ' . $results['id'];?></td>
</tr>
<tr>
<td class="tableHeader">First Name</td>
<td><?php echo $results['firstname'];?></td>
</tr>
<tr>
<td class="tableHeader">Last Name</td>
<td><?php echo $results['lastname'];?></td>
</tr>
<tr>
<td class="tableHeader">Age</td>
<td>17</td>
</tr>
<tr>
<td class="tableHeader">Distance Flown</td>
<td>3790 km</td>
</tr>
<tr>
<td class="tableHeader">Flights</td>
<td><?php echo $results['flights'];?></td>
</tr>
<tr>
<td class="tableHeader">Flight Hours</td>
<td><?php echo $results['flighttime'];?></td>
</tr>
</tbody>
</table>
<table class="table table-bordered style="margin: 0;"">
<thead>
<tr></tr>
<tr></tr>
</thead>
<tbody>
<tr>
<td class="tableHeader">737-600</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">737-700</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">737-800</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">A319</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">A320</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">A321</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">A330</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">A340</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">CRJ-900</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">ATR-600</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">717</td>
<td></td>
</tr>
<tr>
<td class="tableHeader">SAB 2000</td>
<td></td>
</tr>
</tbody>
</table>
</aside>
JSFIDDLE: https://jsfiddle.net/ncqmy09c/
You could do.
.table {
table-layout: fixed;
}
http://jsfiddle.net/vawtr0u5/
1) div.row.
2) div.col-xs-6*2.
3) you tables....
like this -> Example jsfiddle
<div class="row">
<div class="col-xs-6">
<table class="table table-bordered" style="margin: 0;">
TABLE 1
</table>
</div>
<div class="col-xs-6">
<table class="table table-bordered" style="margin: 0;">
TABLE 2
</table>
</div>
</div>
You can also use the HTML col width Attribute
<table class="table table-bordered" style="margin: 0;">
<col width="100">
<col width="100">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Fiddle: https://jsfiddle.net/ncqmy09c/1/
Related
What do you think should I do to make my code's output like in the photo?
Thank you for answering.
(I am typing any words in here because stackoverflow doesnt let me post this. This is the most detailed thing I can think of. I am new to the programming world and I have no one to assist me that's why I am asking for some help. Thank you for understanding.)
Here's my code:
<table border="1" cellpadding="20% " width="20%" cellspacing="0">
<tr>
<td rowspan="10"></td>
<td colspan="9"></td>
</tr>
<tr>
<td rowspan="9"></td>
<td colspan="8"></td>
</tr>
<tr>
<td rowspan="8"></td>
<td colspan="7"></td>
</tr>
<tr>
<td rowspan="7"></td>
<td colspan="6"></td>
</tr>
<tr>
<td rowspan="6"></td>
<td colspan="5"></td>
</tr>
<tr>
<td rowspan="5"></td>
<td colspan="4"></td>
</tr>
<tr>
<td rowspan="4"></td>
<td colspan="3"></td>
</tr>
<tr>
<td rowspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td colspan="1"></td>
</tr>
<tr>
<td rowspan="0">
</td>
</tr>
</table>
enter image description here
make table inside td
<td rowspan="0" style="padding: 0; border: none;">
<table border="1" cellpadding="10% " width="20%" cellspacing="0">
<tr>
<td></td>
<td></td>
</tr><tr>
<td></td>
<td></td>
</tr>
</table>
</td>
<table border="1" cellpadding="20% " width="20%" cellspacing="0">
<tr>
<td rowspan="10"></td>
<td colspan="9"></td>
</tr>
<tr>
<td rowspan="9"></td>
<td colspan="8"></td>
</tr>
<tr>
<td rowspan="8"></td>
<td colspan="7"></td>
</tr>
<tr>
<td rowspan="7"></td>
<td colspan="6"></td>
</tr>
<tr>
<td rowspan="6"></td>
<td colspan="5"></td>
</tr>
<tr>
<td rowspan="5"></td>
<td colspan="4"></td>
</tr>
<tr>
<td rowspan="4"></td>
<td colspan="3"></td>
</tr>
<tr>
<td rowspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td colspan="1"></td>
</tr>
<tr>
<td rowspan="0" style="padding: 0; border: none;">
<table border="1" cellpadding="10% " width="20%" cellspacing="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
I want to remove borders (horizontal & vertical) lines both from the first row of the below snippet:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<br /><br /><br /><table id="myHeader" class="table table-bordered table-responsive">
<tr style="border: none;">
<td colspan="4" style="border: none;">
<h1 class="text-center">Company</h1>
</td>
</tr>
<tr>
<td colspan="4">
<h1 class="text-center">Number</h1>
</td>
</tr>
<tr>
<td colspan="2">
<h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
</td>
<td colspan="2">
<h3><span style="float: right;">Date</span></h3>
</td>
</tr>
<tr>
<th>Sr.</th>
<th>Item</th>
<th>Qty</th>
<th>Amount</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>Shirt (D.C)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td>2</td>
<td>Shirt (Iron)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
<td><strong>Total:</strong></td>
<td><strong>400</strong></td>
</tr>
</tbody>
</table>
I tried the below code but no change was detected!
Tried:
<tr style="border: none;">
<td colspan="4" style="border: none;">
<h1 class="text-center">Company</h1>
</td>
</tr>
I don't want any type of line (horizontal & vertical) to be displayed for the first row of the table. i.e: Company one.
Add a #media print rule to your stylesheet, and remove the border on both the table and first cell.
body {
/* for demo */
margin: 20px !important;
}
#myHeader > tbody tr:first-of-type td {
border-color: #f9f9f9;
border-bottom: 0;
}
#myHeader tr:nth-of-type(2) td {
border-top: none;
}
#media print {
table {
border: 0 !important;
}
#myHeader tr:first-of-type td {
border: 0 !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table id="myHeader" class="table table-striped table-hover table-bordered table-responsive">
<tr>
<td colspan="4">
<h1 class="text-center">Company</h1>
</td>
</tr>
<tr>
<td colspan="4">
<h1 class="text-center">Number</h1>
</td>
</tr>
<tr>
<td colspan="2">
<h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
</td>
<td colspan="2">
<h3><span style="float: right;">Date</span></h3>
</td>
</tr>
<tr>
<th>Sr.</th>
<th>Item</th>
<th>Qty</th>
<th>Amount</th>
</tr>
<tr>
<td>1</td>
<td>Shirt (D.C)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td>2</td>
<td>Shirt (Iron)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
<td><strong>Total:</strong></td>
<td><strong>400</strong></td>
</tr>
</table>
You don't have any border on company but you have border on table and number which is making border around company. Removing them will do the trick
#media print {
table {
border: 0 !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<br /><br /><br />
<table id="myHeader" class="table table-bordered table-responsive" style="border:none;">
<tr class="rem" style="border: none;">
<td colspan="4" class="rem" style="border: none;">
<h1 class="text-center">Company</h1>
</td>
</tr>
<tr>
<td colspan="4" class="rem" style="border:none;">
<h1 class="text-center">Number</h1>
</td>
</tr>
<tr>
<td colspan="2">
<h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
</td>
<td colspan="2">
<h3><span style="float: right;">Date</span></h3>
</td>
</tr>
<tr>
<th>Sr.</th>
<th>Item</th>
<th>Qty</th>
<th>Amount</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>Shirt (D.C)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td>2</td>
<td>Shirt (Iron)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
<td><strong>Total:</strong></td>
<td><strong>400</strong></td>
</tr>
</tbody>
</table>
The border property was from the linked stylesheet. Updated your code by adding this - style="border:none !important" to both company and number.
Works fine now. But your code can be cleaner if you separate your css from your html.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<br /><br /><br /><table id="myHeader" class="table table-bordered table-responsive">
<tr style="border: none;">
<td colspan="4" style="border:none !important" >
<h1 class="text-center">Company</h1>
</td>
</tr>
<tr>
<td colspan="4" style="border:none !important" >
<h1 class="text-center">Number</h1>
</td>
</tr>
<tr>
<td colspan="2">
<h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
</td>
<td colspan="2">
<h3><span style="float: right;">Date</span></h3>
</td>
</tr>
<tr>
<th>Sr.</th>
<th>Item</th>
<th>Qty</th>
<th>Amount</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>Shirt (D.C)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td>2</td>
<td>Shirt (Iron)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
<td><strong>Total:</strong></td>
<td><strong>400</strong></td>
</tr>
</tbody>
</table>
_____________________________________________
Updated Code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<br /><br /><br /><table id="myHeader" class="table table-bordered table-responsive" style="border-top:none !important; border-right:none !important; border-left:none !important">
<tr style="">
<td colspan="4" style="border:none !important" >
<h1 class="text-center">Company</h1>
</td>
</tr>
<tr>
<td colspan="4" style="border:none !important; " >
<h1 class="text-center">Number</h1>
</td>
</tr>
<tr>
<td colspan="2">
<h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
</td>
<td colspan="2">
<h3><span style="float: right;">Date</span></h3>
</td>
</tr>
<tr>
<th>Sr.</th>
<th>Item</th>
<th>Qty</th>
<th>Amount</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>Shirt (D.C)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td>2</td>
<td>Shirt (Iron)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
<td><strong>Total:</strong></td>
<td><strong>400</strong></td>
</tr>
</tbody>
</table>
</body>
</html>
Sure this has a simple answer but can't get my head around it.
I have bootstrap table that has hidden rows that display on click of the row that it's hidden behind. However, the hidden rows show up and I can't get them to disappear when they're not selected.
Trying to get rid of the highlighted space between rows as per this pic:
<table class='table table-hover table-bordered table-striped'>
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>GuideWire</th>
</tr>
</thead>
<tbody>
<tr data-toggle='collapse' data-target='#info_1'>
<td>Good</td>
<td>FooBar</td>
<td>Something else</td>
</tr>
<tr>
<td colspan='8' class='hidden-row'>
<div class='collapse' id='info_1'>
<table class="table table-condensed table-sm small">
<thead>
<th>ABC</th>
<th>DEF</th>
</thead>
<tbody>
<tr>
<td>S1</td>
<td>Blah</td>
</tr>
<tr>
<td>S1</td>
<td>Blah</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr data-toggle='collapse' data-target='#info_2'>
<td>Good 2</td>
<td>FooBar 2</td>
<td>Something else 2</td>
</tr>
<tr>
<td colspan='8' class='hidden-row'>
<div class='collapse' id='info_2'>
<table class="table table-condensed table-sm small">
<thead>
<th>ABC</th>
<th>DEF</th>
</thead>
<tbody>
<tr>
<td>S1</td>
<td>Blah</td>
</tr>
<tr>
<td>S1</td>
<td>Blah</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
If you know how to get .table-striped to ignore hidden rows too, that'd be great.
It's the top & bottom padding. You can reset it with..
.table>tbody .hidden-row {
padding: 0 8px;
}
http://www.codeply.com/go/Ev7XStMM0f
This way it's only adjusting the hidden-row, and not overriding the Bootstrap table defaults. Also, you probably want to keep the left/right padding so the columns in the hidden-row align properly.
Its the padding which is giving it the space.
This should work
.table>tbody>tr>td.hidden-row, .table>tbody>tr>th.hidden-row,
.table>tfoot>tr>td.hidden-row,
.table>tfoot>tr>th.hidden-row, .table>thead>tr>td.hidden-row,
.table>thead>tr>th.hidden-row {
padding: 0;
}
Reset the css properties
.table.table-hover {
line-height: 0;
height: 0px;
padding: 0;
}
Try the below code and let me know if it works for you
**CSS**
.inner-table-data
{
margin-bottom: 0;
}
**HTML**
<table class='table table-hover table-bordered table-striped'>
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>GuideWire</th>
</tr>
</thead>
<tbody>
<tr data-toggle='collapse' data-target='#info_1'>
<td class="col-sm-4">Good</td>
<td class="col-sm-4">FooBar</td>
<td class="col-sm-4">Something else</td>
</tr>
<tr>
<td colspan='1' class='collapse' id='info_1'>
<div>
<table class="table table-striped inner-table-data">
<thead>
<th>ABC</th>
<th>DEF</th>
</thead>
<tbody>
<tr>
<td>S1</td>
<td>Blah</td>
</tr>
<tr>
<td>S1</td>
<td>Blah</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr data-toggle='collapse' data-target='#info_2'>
<td class="col-sm-4">Good 2</td>
<td class="col-sm-4">FooBar 2</td>
<td class="col-sm-4">Something else 2</td>
</tr>
<tr>
<td colspan='1' class='collapse' id='info_2'>
<div>
<table class="table table-striped inner-table-data">
<thead>
<th>ABC</th>
<th>DEF</th>
</thead>
<tbody>
<tr>
<td>S1</td>
<td>Blah</td>
</tr>
<tr>
<td>S1</td>
<td>Blah</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
i wanna create something like this in my table
i try with this code, but the result far from what i want
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
</tr>
<tr>
<td>SubItem1a</td>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1a</td>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
or
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
<td>
<tr>SubItem1a</tr>
<tr>Subitem1b</tr>
<tr>Subitem1c</tr>
</td>
<td>
<tr>AnotherSub1a</tr>
<tr>AnotherSub1b</tr>
<tr>AnotherSub1c</tr>
</td>
</tr>
</table>
how to archive table like image?
Now used to this code rowspan Attribute
<table border="1" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<tr>
<td rowspan="3" align="center">No</td>
<td rowspan="3" align="center">Item1</td>
<td>SubItem1a</td>
<td>SubItem1a</td>
</tr>
<tr>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
This will help with your future reference.
I did some example hopefully you understand what is rowspan and colspan.
<h1> Without using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td>10</td>
<td >20</td>
<td >30</td>
<td >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using colspan </h1>
<table border="1">
<tr>
<th colspan="5">Hello World</th>
</tr>
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
DEMO
I'm new to bootstrap. I'm using bootstrap 3. I'm trying to figure out how I can create the following so that it looks like a standard table when not viewing it on a mobile device, and in a more stacked fashion when on mobile.
This is what I'm wanting to do:
You need to your code mention in two different table. & then use css class .hidden-xs & .visible-xs for show & hide in responsive and non-responsive view.
Example following code. also, check it here in jsfiddle
<!--Non-Mobile-->
<table class="table table-bordered table-hover hidden-xs">
<thead>
<tr>
<td>DOMAIN</td>
<td>USER</td>
<td>ACCT</td>
<td>STATUS</td>
<td>ACTIONS</td>
</tr>
</thead>
<tbody>
<tr>
<td>domain1.co</td>
<td>user1</td>
<td>123456</td>
<td>active</td>
<td>edit</td>
</tr>
<tr>
<td>domain2.co</td>
<td>user1</td>
<td>654321</td>
<td>active</td>
<td>edit</td>
</tr>
</tbody>
</table>
<!--Responsive-->
<table class="table table-bordered table-hover visible-xs">
<tr>
<td>DOMAIN</td>
</tr>
<tr>
<td>domain1.co</td>
</tr>
<tr>
<td>USER</td>
</tr>
<tr>
<td>user1</td>
</tr>
<tr>
<td>ACCT</td>
</tr>
<tr>
<td>123456</td>
</tr>
<tr>
<td>STATUS</td>
</tr>
<tr>
<td>active</td>
</tr>
<tr>
<td>ACTIONS</td>
</tr>
<tr>
<td>edit</td>
</tr>
</table>
<table class="table table-bordered table-hover visible-xs">
<tr>
<td>DOMAIN</td>
</tr>
<tr>
<td>domain2.co</td>
</tr>
<tr>
<td>USER</td>
</tr>
<tr>
<td>user1</td>
</tr>
<tr>
<td>ACCT</td>
</tr>
<tr>
<td>654321</td>
</tr>
<tr>
<td>STATUS</td>
</tr>
<tr>
<td>active</td>
</tr>
<tr>
<td>ACTIONS</td>
</tr>
<tr>
<td>edit</td>
</tr>
</table>
</div>