From a8d4f0a6576e75931d85a1b3d5f51fd3eca2d055 Mon Sep 17 00:00:00 2001 From: Naoki Takezoe Date: Tue, 8 Dec 2015 09:21:50 +0900 Subject: [PATCH 1/4] Fix table border-radius --- less/tables.less | 252 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 252 insertions(+) create mode 100644 less/tables.less diff --git a/less/tables.less b/less/tables.less new file mode 100644 index 0000000..9d5a45f --- /dev/null +++ b/less/tables.less @@ -0,0 +1,252 @@ +// +// Tables +// -------------------------------------------------- + + +table { + background-color: @table-bg; +} +caption { + padding-top: @table-cell-padding; + padding-bottom: @table-cell-padding; + color: @text-muted; + text-align: left; +} +th { + text-align: left; +} + + +// Baseline styles + +.table { + width: 100%; + max-width: 100%; + margin-bottom: @line-height-computed; + // Cells + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: @table-cell-padding; + line-height: @line-height-base; + vertical-align: top; + border-top: 1px solid @table-border-color; + } + } + } + // Bottom align for column headings + > thead > tr > th { + vertical-align: bottom; + border-bottom: 2px solid @table-border-color; + } + // Remove top border from thead by default + > caption + thead, + > colgroup + thead, + > thead:first-child { + > tr:first-child { + > th, + > td { + border-top: 0; + } + } + } + // Account for multiple tbody instances + > tbody + tbody { + border-top: 2px solid @table-border-color; + } + + // Nesting + .table { + background-color: @body-bg; + } +} + + +// Condensed table w/ half padding + +.table-condensed { + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: @table-condensed-cell-padding; + } + } + } +} + + +// Bordered version +// +// Add borders all around the table and between all the columns. + +.table-bordered { + border: 1px solid @table-border-color; + > thead, + > tbody, + > tfoot { + > tr:first-child { + > th:nth-of-type(1), + > td:nth-of-type(1) { + border-top-left-radius: 4px; + } + > th:nth-last-of-type(1), + > td:nth-last-of-type(1) { + border-top-right-radius: 4px; + } + } + > tr:last-child { + > td:nth-of-type(1) { + border-bottom-left-radius: 4px; + } + > td:nth-last-of-type(1) { + border-bottom-right-radius: 4px; + } + } + > tr { + > th, + > td { + border: 1px solid @table-border-color; + } + } + } + > thead > tr { + > th, + > td { + border-bottom-width: 1px; + } + } +} + + +// Zebra-striping +// +// Default zebra-stripe styles (alternating gray and transparent backgrounds) + +.table-striped { + > tbody > tr:nth-of-type(odd) { + background-color: @table-bg-accent; + } +} + + +// Hover effect +// +// Placed here since it has to come after the potential zebra striping + +.table-hover { + > tbody > tr:hover { + background-color: @table-bg-hover; + } +} + + +// Table cell sizing +// +// Reset default table behavior + +table col[class*="col-"] { + position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623) + float: none; + display: table-column; +} +table { + td, + th { + &[class*="col-"] { + position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623) + float: none; + display: table-cell; + } + } +} + + +// Table backgrounds +// +// Exact selectors below required to override `.table-striped` and prevent +// inheritance to nested tables. + +// Generate the contextual variants +.table-row-variant(active; @table-bg-active); +.table-row-variant(success; @state-success-bg); +.table-row-variant(info; @state-info-bg); +.table-row-variant(warning; @state-warning-bg); +.table-row-variant(danger; @state-danger-bg); + + +// Responsive tables +// +// Wrap your tables in `.table-responsive` and we'll make them mobile friendly +// by enabling horizontal scrolling. Only applies <768px. Everything above that +// will display normally. + +.table-responsive { + overflow-x: auto; + min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) + + @media screen and (max-width: @screen-xs-max) { + width: 100%; + margin-bottom: (@line-height-computed * 0.75); + overflow-y: hidden; + -ms-overflow-style: -ms-autohiding-scrollbar; + border: 1px solid @table-border-color; + + // Tighten up spacing + > .table { + margin-bottom: 0; + + // Ensure the content doesn't wrap + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + white-space: nowrap; + } + } + } + } + + // Special overrides for the bordered tables + > .table-bordered { + border: 0; + + // Nuke the appropriate borders so that the parent can handle them + > thead, + > tbody, + > tfoot { + > tr { + > th:first-child, + > td:first-child { + border-left: 0; + } + > th:last-child, + > td:last-child { + border-right: 0; + } + } + } + + // Only nuke the last row's bottom-border in `tbody` and `tfoot` since + // chances are there will be only one `tr` in a `thead` and that would + // remove the border altogether. + > tbody, + > tfoot { + > tr:last-child { + > th, + > td { + border-bottom: 0; + } + } + } + + } + } +} From fbdb66ff364c78770b8428305e91c29ea971c26e Mon Sep 17 00:00:00 2001 From: Naoki Takezoe Date: Tue, 8 Dec 2015 17:39:06 +0900 Subject: [PATCH 2/4] Improve border and border-radius definition --- less/tables.less | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/less/tables.less b/less/tables.less index 9d5a45f..d12acfb 100644 --- a/less/tables.less +++ b/less/tables.less @@ -86,20 +86,11 @@ th { // Add borders all around the table and between all the columns. .table-bordered { - border: 1px solid @table-border-color; + border: none; + border-collapse: inherit; > thead, > tbody, > tfoot { - > tr:first-child { - > th:nth-of-type(1), - > td:nth-of-type(1) { - border-top-left-radius: 4px; - } - > th:nth-last-of-type(1), - > td:nth-last-of-type(1) { - border-top-right-radius: 4px; - } - } > tr:last-child { > td:nth-of-type(1) { border-bottom-left-radius: 4px; @@ -115,10 +106,19 @@ th { } } } - > thead > tr { + > thead:first-child > tr:first-child { > th, > td { - border-bottom-width: 1px; + border-top: 1px solid @table-border-color; + border-bottom: 0; + } + > th:nth-of-type(1), + > td:nth-of-type(1) { + border-top-left-radius: 4px; + } + > th:nth-last-of-type(1), + > td:nth-last-of-type(1) { + border-top-right-radius: 4px; } } } From 7211d4dd53f1266b262f3c1ef2d17f10b220f125 Mon Sep 17 00:00:00 2001 From: Naoki Takezoe Date: Tue, 8 Dec 2015 17:54:06 +0900 Subject: [PATCH 3/4] Fix bottom border --- less/tables.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/less/tables.less b/less/tables.less index d12acfb..e91148b 100644 --- a/less/tables.less +++ b/less/tables.less @@ -92,6 +92,10 @@ th { > tbody, > tfoot { > tr:last-child { + > th, + > td { + border-bottom: 1px solid @table-border-color; + } > td:nth-of-type(1) { border-bottom-left-radius: 4px; } @@ -103,6 +107,7 @@ th { > th, > td { border: 1px solid @table-border-color; + border-bottom: 0; } } } From 0a9a7099f7a26353265575f90ce6eb365f1c28c8 Mon Sep 17 00:00:00 2001 From: Naoki Takezoe Date: Thu, 10 Dec 2015 01:15:18 +0900 Subject: [PATCH 4/4] Fix vertical border --- less/tables.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/less/tables.less b/less/tables.less index e91148b..7a05409 100644 --- a/less/tables.less +++ b/less/tables.less @@ -108,6 +108,11 @@ th { > td { border: 1px solid @table-border-color; border-bottom: 0; + border-right: 0; + } + > th:nth-last-of-type(1), + > td:nth-last-of-type(1) { + border-right: 1px solid @table-border-color; } } }