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
parent
b5f2482a58
commit
4cec956e0c
2
css.html
2
css.html
|
|
@ -921,7 +921,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
{% endhighlight %}
|
||||
|
||||
<h3 id="tables-bordered">Bordered</h3>
|
||||
<p>Add <code>.table-bordered</code> for borders and rounded corners.</p>
|
||||
<p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
|
||||
<div class="bs-example">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -1159,9 +1159,6 @@ th {
|
|||
|
||||
.table-bordered {
|
||||
border: 1px solid #dddddd;
|
||||
border-collapse: separate;
|
||||
border-left: 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.table-bordered > thead > tr > th,
|
||||
|
|
@ -1170,69 +1167,7 @@ th {
|
|||
.table-bordered > thead > tr > td,
|
||||
.table-bordered > tbody > tr > td,
|
||||
.table-bordered > tfoot > tr > td {
|
||||
border-left: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.table-bordered > caption + thead > tr:first-child th,
|
||||
.table-bordered > caption + tbody > tr:first-child th,
|
||||
.table-bordered > caption + tbody > tr:first-child td,
|
||||
.table-bordered > colgroup + thead > tr:first-child th,
|
||||
.table-bordered > colgroup + tbody > tr:first-child th,
|
||||
.table-bordered > colgroup + tbody > tr:first-child td,
|
||||
.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;
|
||||
}
|
||||
|
||||
.table-bordered > thead:first-child > tr:first-child > th:first-child,
|
||||
.table-bordered > tbody:first-child > tr:first-child > td:first-child,
|
||||
.table-bordered > tbody:first-child > tr:first-child > th:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
.table-bordered > thead:first-child > tr:first-child > th:last-child,
|
||||
.table-bordered > tbody:first-child > tr:first-child > td:last-child,
|
||||
.table-bordered > tbody:first-child > tr:first-child > th:last-child {
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
.table-bordered > thead:last-child > tr:last-child > th:first-child,
|
||||
.table-bordered > tbody:last-child > tr:last-child > td:first-child,
|
||||
.table-bordered > tbody:last-child > tr:last-child > th:first-child,
|
||||
.table-bordered > tfoot:last-child > tr:last-child > td:first-child,
|
||||
.table-bordered > tfoot:last-child > tr:last-child > th:first-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.table-bordered > thead:last-child > tr:last-child > th:last-child,
|
||||
.table-bordered > tbody:last-child > tr:last-child > td:last-child,
|
||||
.table-bordered > tbody:last-child > tr:last-child > th:last-child,
|
||||
.table-bordered > tfoot:last-child > tr:last-child > td:last-child,
|
||||
.table-bordered > tfoot:last-child > tr:last-child > th:last-child {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.table-bordered > tfoot + tbody:last-child > tr:last-child > td:first-child {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.table-bordered > tfoot + tbody:last-child > tr:last-child > td:last-child {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.table-bordered > caption + thead > tr:first-child > th:first-child,
|
||||
.table-bordered > colgroup + thead > tr:first-child > th:first-child,
|
||||
.table-bordered > caption + tbody > tr:first-child > td:first-child,
|
||||
.table-bordered > colgroup + tbody > tr:first-child > td:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
.table-bordered > caption + thead > tr:first-child > th:last-child,
|
||||
.table-bordered > colgroup + thead > tr:first-child > th:last-child,
|
||||
.table-bordered > caption + tbody > tr:first-child > td:last-child,
|
||||
.table-bordered > colgroup + tbody > tr:first-child > td:last-child {
|
||||
border-top-right-radius: 4px;
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.table-striped > tbody > tr:nth-child(odd) > td,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue