0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Bootstrap/scss/_tables.scss

236 lines
3.8 KiB
SCSS
Raw Normal View History

//
// Reset tabular elements
//
2011-05-04 03:09:25 +02:00
table {
2014-12-02 23:02:35 +01:00
background-color: $table-bg;
}
caption {
2014-12-02 23:02:35 +01:00
padding-top: $table-cell-padding;
padding-bottom: $table-cell-padding;
color: $text-muted;
text-align: left;
}
th {
text-align: left;
}
//
// Basic tables
//
2011-05-04 03:09:25 +02:00
.table {
2011-05-04 03:09:25 +02:00
width: 100%;
max-width: 100%;
2014-12-05 00:25:57 +01:00
margin-bottom: $spacer;
th,
td {
padding: $table-cell-padding;
line-height: $line-height-base;
vertical-align: top;
border-top: 1px solid $table-border-color;
}
thead th {
vertical-align: bottom;
2014-12-02 23:02:35 +01:00
border-bottom: 2px solid $table-border-color;
}
tbody + tbody {
2014-12-02 23:02:35 +01:00
border-top: 2px solid $table-border-color;
}
.table {
background-color: $body-bg;
}
}
//
// Condensed table w/ half padding
//
2014-09-18 07:14:27 +02:00
.table-sm {
th,
td {
padding: $table-sm-cell-padding;
}
}
// Bordered version
//
// Add borders all around the table and between all the columns.
.table-bordered {
2014-12-02 23:02:35 +01:00
border: 1px solid $table-border-color;
th,
td {
border: 1px solid $table-border-color;
}
thead {
th,
td {
2013-09-20 18:06:48 +02:00
border-bottom-width: 2px;
}
}
2011-05-04 03:09:25 +02:00
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
tbody tr:nth-of-type(odd) {
2014-12-02 23:02:35 +01:00
background-color: $table-bg-accent;
}
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
tbody tr {
@include hover {
background-color: $table-bg-hover;
}
}
}
// Table cell sizing
//
// Reset default table behavior
table col[class*="col-"] {
Merge branch 'master' into v4 Conflicts: Gruntfile.js dist/css/bootstrap-theme.css dist/css/bootstrap-theme.css.map dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/js/bootstrap.min.js docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/breadcrumbs.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/jumbotron.html docs/_includes/components/labels.html docs/_includes/components/list-group.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/page-header.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/components/responsive-embed.html docs/_includes/components/thumbnails.html docs/_includes/components/wells.html docs/_includes/css/buttons.html docs/_includes/css/code.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/customizer-variables.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/disabling-responsiveness.html docs/_includes/getting-started/download.html docs/_includes/getting-started/whats-included.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/popovers.html docs/_includes/js/tabs.html docs/_includes/js/tooltips.html docs/_includes/nav/components.html docs/_includes/nav/javascript.html docs/_jade/customizer-variables.jade docs/_layouts/default.html docs/about.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/assets/js/src/customizer.js docs/customize.html docs/dist/css/bootstrap-theme.css.map docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css less/glyphicons.less less/mixins/vendor-prefixes.less less/navbar.less less/popovers.less less/tables.less less/theme.less less/tooltip.less less/variables.less package.json scss/_carousel.scss scss/_close.scss scss/_forms.scss test-infra/npm-shrinkwrap.json
2015-01-04 05:08:58 +01:00
position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
display: table-column;
float: none;
}
table {
td,
th {
&[class*="col-"] {
Merge branch 'master' into v4 Conflicts: Gruntfile.js dist/css/bootstrap-theme.css dist/css/bootstrap-theme.css.map dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/js/bootstrap.min.js docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/breadcrumbs.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/jumbotron.html docs/_includes/components/labels.html docs/_includes/components/list-group.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/page-header.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/components/responsive-embed.html docs/_includes/components/thumbnails.html docs/_includes/components/wells.html docs/_includes/css/buttons.html docs/_includes/css/code.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/customizer-variables.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/disabling-responsiveness.html docs/_includes/getting-started/download.html docs/_includes/getting-started/whats-included.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/popovers.html docs/_includes/js/tabs.html docs/_includes/js/tooltips.html docs/_includes/nav/components.html docs/_includes/nav/javascript.html docs/_jade/customizer-variables.jade docs/_layouts/default.html docs/about.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/assets/js/src/customizer.js docs/customize.html docs/dist/css/bootstrap-theme.css.map docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css less/glyphicons.less less/mixins/vendor-prefixes.less less/navbar.less less/popovers.less less/tables.less less/theme.less less/tooltip.less less/variables.less package.json scss/_carousel.scss scss/_close.scss scss/_forms.scss test-infra/npm-shrinkwrap.json
2015-01-04 05:08:58 +01:00
position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
display: table-cell;
float: none;
}
}
}
// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
// Generate the contextual variants
2014-12-02 23:02:35 +01:00
@include table-row-variant(active, $table-bg-active);
@include table-row-variant(success, $state-success-bg);
@include table-row-variant(info, $state-info-bg);
@include table-row-variant(warning, $state-warning-bg);
@include 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.
2014-02-14 19:48:17 +01:00
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
// Todo: find out if we need this still.
//
// border: 1px solid $table-border-color;
// -ms-overflow-style: -ms-autohiding-scrollbar;
// min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
}
2014-07-14 08:45:34 +02:00
.thead-inverse {
th {
2014-07-14 08:45:34 +02:00
color: #fff;
2014-12-02 23:02:35 +01:00
background-color: $gray-dark;
2014-07-14 08:45:34 +02:00
}
}
.thead-default {
th {
2014-12-02 23:02:35 +01:00
color: $gray;
background-color: $gray-lighter;
2014-07-14 08:45:34 +02:00
}
}
2014-07-14 09:23:46 +02:00
.table-inverse {
2014-12-02 23:02:35 +01:00
color: $gray-lighter;
background-color: $gray-dark;
2014-07-14 09:23:46 +02:00
&.table-bordered {
border: 0;
}
th,
2015-01-20 00:52:40 +01:00
td,
thead th {
border-color: $gray;
2014-07-14 09:23:46 +02:00
}
}
.table-reflow {
thead {
float: left;
}
tbody {
display: block;
white-space: nowrap;
}
th,
td {
border-top: 1px solid $table-border-color;
border-left: 1px solid $table-border-color;
&:last-child {
border-right: 1px solid $table-border-color;
}
}
thead,
tbody,
tfoot {
&:last-child {
tr:last-child {
th,
td {
2014-12-02 23:02:35 +01:00
border-bottom: 1px solid $table-border-color;
}
}
}
}
tr {
float: left;
th,
td {
display: block !important;
2014-12-02 23:02:35 +01:00
border: 1px solid $table-border-color;
}
}
}