}
.table-bordered {
border: 1px solid #ddd;
+ border-left: 0;
border-collapse: separate;
*border-collapse: collapsed;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
-.table-bordered th + th,
-.table-bordered td + td,
-.table-bordered th + td,
-.table-bordered td + th {
+.table-bordered th, .table-bordered td {
border-left: 1px solid #ddd;
}
.table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td {
border-top: 0;
+ border-bottom: 1px solid #ddd;
}
.table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child {
-webkit-border-radius: 4px 0 0 0;
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
- <th>Language</th>
+ <th>Username</th>
</tr>
</thead>
<tbody>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td>Javascript</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>HTML</td>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
- <th>Language</th>
+ <th>Username</th>
</tr>
</thead>
<tbody>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td>Javascript</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>HTML</td>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
- <th>Language</th>
+ <th>Username</th>
</tr>
</thead>
<tbody>
<tr>
- <td>1</td>
- <td colspan="2">Mark Otto</td>
- <td>CSS</td>
+ <td rowspan="2">1</td>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td rowspan="2">Javascript</td>
- </tr>
- </tr>
- <td>3</td>
- <td>Stu</td>
- <td>Dent</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Brosef</td>
- <td>Stalin</td>
- <td>HTML</td>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
- <th>Language</th>
+ <th>Username</th>
</tr>
</thead>
<tbody>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td>Javascript</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>HTML</td>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
<div class="span8">
<table class="table table-striped table-bordered table-condensed">
<thead>
+ <tr>
+ <th></th>
+ <th colspan="2">Full name</th>
+ <th></th>
+ </tr>
<tr>
<th>#</th>
- <th class="yellow">First Name</th>
- <th class="blue">Last Name</th>
- <th class="green">Language</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
</tr>
</thead>
<tbody>
+ <tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td>Javascript</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>HTML</td>
- </tr>
- <tr>
- <td>4</td>
- <td>Brosef</td>
- <td>Stalin</td>
- <td>HTML</td>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
- <th>{{_i}}Language{{/i}}</th>
+ <th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td>Javascript</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>HTML</td>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
- <th>{{_i}}Language{{/i}}</th>
+ <th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td>Javascript</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>HTML</td>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
- <th>{{_i}}Language{{/i}}</th>
+ <th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
- <td>HTML</td>
+ <td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td rowspan="2">Javascript</td>
- </tr>
- </tr>
- <td>3</td>
- <td>Stu</td>
- <td>Dent</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Brosef</td>
- <td>Stalin</td>
- <td>HTML</td>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
- <th>{{_i}}Language{{/i}}</th>
+ <th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td>Javascript</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>HTML</td>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
<div class="span8">
<table class="table table-striped table-bordered table-condensed">
<thead>
+ <tr>
+ <th></th>
+ <th colspan="2">{{_i}}Full name{{/i}}</th>
+ <th></th>
+ </tr>
<tr>
<th>#</th>
- <th class="yellow">{{_i}}First Name{{/i}}</th>
- <th class="blue">{{_i}}Last Name{{/i}}</th>
- <th class="green">{{_i}}Language{{/i}}</th>
+ <th>{{_i}}First Name{{/i}}</th>
+ <th>{{_i}}Last Name{{/i}}</th>
+ <th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
+ <tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td>Javascript</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>HTML</td>
- </tr>
- <tr>
- <td>4</td>
- <td>Brosef</td>
- <td>Stalin</td>
- <td>HTML</td>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
.table-bordered {
border: 1px solid #ddd;
+ border-left: 0;
border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapsed; // IE7 can't round corners anyway
.border-radius(4px);
- th + th,
- td + td,
- th + td,
- td + th {
+ th,
+ td {
border-left: 1px solid #ddd;
}
// Prevent a double border
tbody:first-child tr:first-child th,
tbody:first-child tr:first-child td {
border-top: 0;
+ border-bottom: 1px solid #ddd;
}
// For first th or td in the first row in the first thead or tbody
thead:first-child tr:first-child th:first-child,