2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00

Drop rounded corners on .table-bordered

* Cuts  close to 100 lines of CSS from the table CSS
* File size aside, this drastically simplifies CSS for folks looking to
build on top of the `.table-bordered` option as a starting point
This commit is contained in:
Mark Otto
2013-07-23 10:48:30 -07:00
parent b5f2482a58
commit 4cec956e0c
4 changed files with 11 additions and 140 deletions
+8 -72
View File
@@ -12,7 +12,7 @@ th {
}
// BASELINE STYLES
// Baseline styles
// ---------------
.table {
@@ -59,7 +59,7 @@ th {
// CONDENSED TABLE W/ HALF PADDING
// Condensed table w/ half padding
// -------------------------------
.table-condensed {
@@ -77,82 +77,18 @@ th {
// BORDERED VERSION
// Bordered version
// ----------------
.table-bordered {
border: 1px solid @table-border-color;
border-collapse: separate; // Done so we can round those corners!
border-left: 0;
border-radius: @border-radius-base;
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
border-left: 1px solid @table-border-color;
}
}
}
// Prevent a double border
> caption + thead > tr:first-child th,
> caption + tbody > tr:first-child th,
> caption + tbody > tr:first-child td,
> colgroup + thead > tr:first-child th,
> colgroup + tbody > tr:first-child th,
> colgroup + tbody > tr:first-child td,
> thead:first-child > tr:first-child th,
> tbody:first-child > tr:first-child th,
> tbody:first-child > tr:first-child td {
border-top: 0;
}
> thead:first-child > tr:first-child > th,
> tbody:first-child > tr:first-child > td,
> tbody:first-child > tr:first-child > th {
// For first th/td in the first row in the first thead or tbody
&:first-child{
border-top-left-radius: @border-radius-base;
}
// For last th/td in the first row in the first thead or tbody
&:last-child{
border-top-right-radius: @border-radius-base;
}
}
> thead:last-child > tr:last-child > th,
> tbody:last-child > tr:last-child > td,
> tbody:last-child > tr:last-child > th,
> tfoot:last-child > tr:last-child > td,
> tfoot:last-child > tr:last-child > th {
// For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
&:first-child{
border-bottom-left-radius: @border-radius-base;
}
// For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
&:last-child{
border-bottom-right-radius: @border-radius-base;
}
}
// Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
> tfoot + tbody:last-child > tr:last-child > td:first-child {
border-bottom-left-radius: 0;
}
> tfoot + tbody:last-child > tr:last-child > td:last-child {
border-bottom-right-radius: 0;
}
// Special fixes to round the left border on the first td/th
> caption,
> colgroup {
+ thead > tr:first-child > th,
+ tbody > tr:first-child > td {
&:first-child {
border-top-left-radius: @border-radius-base;
}
&:last-child {
border-top-right-radius: @border-radius-base;
border: 1px solid @table-border-color;
}
}
}
@@ -160,7 +96,7 @@ th {
// ZEBRA-STRIPING
// Zebra-striping
// --------------
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
@@ -177,7 +113,7 @@ th {
// HOVER EFFECT
// Hover effect
// ------------
// Placed here since it has to come after the potential zebra striping
@@ -194,7 +130,7 @@ th {
// TABLE CELL SIZING
// Table cell sizing
// -----------------
// Reset default table behavior
@@ -214,7 +150,7 @@ table {
// TABLE BACKGROUNDS
// Table backgrounds
// -----------------
// Exact selectors below required to override .table-striped