Last active
August 29, 2015 13:57
-
-
Save beacrea/9770238 to your computer and use it in GitHub Desktop.
The table styles taken from bootstrap.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
table { | |
border-spacing: 0; | |
border-collapse: collapse; | |
} | |
td, | |
th { | |
padding: 0; | |
} | |
table { | |
max-width: 100%; | |
background-color: transparent; | |
} | |
th { | |
text-align: left; | |
} | |
.table { | |
width: 100%; | |
margin-bottom: 20px; | |
} | |
.table > thead > tr > th, | |
.table > tbody > tr > th, | |
.table > tfoot > tr > th, | |
.table > thead > tr > td, | |
.table > tbody > tr > td, | |
.table > tfoot > tr > td { | |
padding: 8px; | |
line-height: 1.42857143; | |
vertical-align: top; | |
border-top: 1px solid #ddd; | |
} | |
.table > thead > tr > th { | |
vertical-align: bottom; | |
border-bottom: 2px solid #ddd; | |
} | |
.table > caption + thead > tr:first-child > th, | |
.table > colgroup + thead > tr:first-child > th, | |
.table > thead:first-child > tr:first-child > th, | |
.table > caption + thead > tr:first-child > td, | |
.table > colgroup + thead > tr:first-child > td, | |
.table > thead:first-child > tr:first-child > td { | |
border-top: 0; | |
} | |
.table > tbody + tbody { | |
border-top: 2px solid #ddd; | |
} | |
.table .table { | |
background-color: #fff; | |
} | |
.table-condensed > thead > tr > th, | |
.table-condensed > tbody > tr > th, | |
.table-condensed > tfoot > tr > th, | |
.table-condensed > thead > tr > td, | |
.table-condensed > tbody > tr > td, | |
.table-condensed > tfoot > tr > td { | |
padding: 5px; | |
} | |
.table-bordered { | |
border: 1px solid #ddd; | |
} | |
.table-bordered > thead > tr > th, | |
.table-bordered > tbody > tr > th, | |
.table-bordered > tfoot > tr > th, | |
.table-bordered > thead > tr > td, | |
.table-bordered > tbody > tr > td, | |
.table-bordered > tfoot > tr > td { | |
border: 1px solid #ddd; | |
} | |
.table-bordered > thead > tr > th, | |
.table-bordered > thead > tr > td { | |
border-bottom-width: 2px; | |
} | |
.table-striped > tbody > tr:nth-child(odd) > td, | |
.table-striped > tbody > tr:nth-child(odd) > th { | |
background-color: #f9f9f9; | |
} | |
.table-hover > tbody > tr:hover > td, | |
.table-hover > tbody > tr:hover > th { | |
background-color: #f5f5f5; | |
} | |
table col[class*="col-"] { | |
position: static; | |
display: table-column; | |
float: none; | |
} | |
table td[class*="col-"], | |
table th[class*="col-"] { | |
position: static; | |
display: table-cell; | |
float: none; | |
} | |
.table > thead > tr > td.active, | |
.table > tbody > tr > td.active, | |
.table > tfoot > tr > td.active, | |
.table > thead > tr > th.active, | |
.table > tbody > tr > th.active, | |
.table > tfoot > tr > th.active, | |
.table > thead > tr.active > td, | |
.table > tbody > tr.active > td, | |
.table > tfoot > tr.active > td, | |
.table > thead > tr.active > th, | |
.table > tbody > tr.active > th, | |
.table > tfoot > tr.active > th { | |
background-color: #f5f5f5; | |
} | |
.table-hover > tbody > tr > td.active:hover, | |
.table-hover > tbody > tr > th.active:hover, | |
.table-hover > tbody > tr.active:hover > td, | |
.table-hover > tbody > tr.active:hover > th { | |
background-color: #e8e8e8; | |
} | |
.table > thead > tr > td.success, | |
.table > tbody > tr > td.success, | |
.table > tfoot > tr > td.success, | |
.table > thead > tr > th.success, | |
.table > tbody > tr > th.success, | |
.table > tfoot > tr > th.success, | |
.table > thead > tr.success > td, | |
.table > tbody > tr.success > td, | |
.table > tfoot > tr.success > td, | |
.table > thead > tr.success > th, | |
.table > tbody > tr.success > th, | |
.table > tfoot > tr.success > th { | |
background-color: #dff0d8; | |
} | |
.table-hover > tbody > tr > td.success:hover, | |
.table-hover > tbody > tr > th.success:hover, | |
.table-hover > tbody > tr.success:hover > td, | |
.table-hover > tbody > tr.success:hover > th { | |
background-color: #d0e9c6; | |
} | |
.table > thead > tr > td.info, | |
.table > tbody > tr > td.info, | |
.table > tfoot > tr > td.info, | |
.table > thead > tr > th.info, | |
.table > tbody > tr > th.info, | |
.table > tfoot > tr > th.info, | |
.table > thead > tr.info > td, | |
.table > tbody > tr.info > td, | |
.table > tfoot > tr.info > td, | |
.table > thead > tr.info > th, | |
.table > tbody > tr.info > th, | |
.table > tfoot > tr.info > th { | |
background-color: #d9edf7; | |
} | |
.table-hover > tbody > tr > td.info:hover, | |
.table-hover > tbody > tr > th.info:hover, | |
.table-hover > tbody > tr.info:hover > td, | |
.table-hover > tbody > tr.info:hover > th { | |
background-color: #c4e3f3; | |
} | |
.table > thead > tr > td.warning, | |
.table > tbody > tr > td.warning, | |
.table > tfoot > tr > td.warning, | |
.table > thead > tr > th.warning, | |
.table > tbody > tr > th.warning, | |
.table > tfoot > tr > th.warning, | |
.table > thead > tr.warning > td, | |
.table > tbody > tr.warning > td, | |
.table > tfoot > tr.warning > td, | |
.table > thead > tr.warning > th, | |
.table > tbody > tr.warning > th, | |
.table > tfoot > tr.warning > th { | |
background-color: #fcf8e3; | |
} | |
.table-hover > tbody > tr > td.warning:hover, | |
.table-hover > tbody > tr > th.warning:hover, | |
.table-hover > tbody > tr.warning:hover > td, | |
.table-hover > tbody > tr.warning:hover > th { | |
background-color: #faf2cc; | |
} | |
.table > thead > tr > td.danger, | |
.table > tbody > tr > td.danger, | |
.table > tfoot > tr > td.danger, | |
.table > thead > tr > th.danger, | |
.table > tbody > tr > th.danger, | |
.table > tfoot > tr > th.danger, | |
.table > thead > tr.danger > td, | |
.table > tbody > tr.danger > td, | |
.table > tfoot > tr.danger > td, | |
.table > thead > tr.danger > th, | |
.table > tbody > tr.danger > th, | |
.table > tfoot > tr.danger > th { | |
background-color: #f2dede; | |
} | |
.table-hover > tbody > tr > td.danger:hover, | |
.table-hover > tbody > tr > th.danger:hover, | |
.table-hover > tbody > tr.danger:hover > td, | |
.table-hover > tbody > tr.danger:hover > th { | |
background-color: #ebcccc; | |
} | |
@media (max-width: 767px) { | |
.table-responsive { | |
width: 100%; | |
margin-bottom: 15px; | |
overflow-x: scroll; | |
overflow-y: hidden; | |
-webkit-overflow-scrolling: touch; | |
-ms-overflow-style: -ms-autohiding-scrollbar; | |
border: 1px solid #ddd; | |
} | |
.table-responsive > .table { | |
margin-bottom: 0; | |
} | |
.table-responsive > .table > thead > tr > th, | |
.table-responsive > .table > tbody > tr > th, | |
.table-responsive > .table > tfoot > tr > th, | |
.table-responsive > .table > thead > tr > td, | |
.table-responsive > .table > tbody > tr > td, | |
.table-responsive > .table > tfoot > tr > td { | |
white-space: nowrap; | |
} | |
.table-responsive > .table-bordered { | |
border: 0; | |
} | |
.table-responsive > .table-bordered > thead > tr > th:first-child, | |
.table-responsive > .table-bordered > tbody > tr > th:first-child, | |
.table-responsive > .table-bordered > tfoot > tr > th:first-child, | |
.table-responsive > .table-bordered > thead > tr > td:first-child, | |
.table-responsive > .table-bordered > tbody > tr > td:first-child, | |
.table-responsive > .table-bordered > tfoot > tr > td:first-child { | |
border-left: 0; | |
} | |
.table-responsive > .table-bordered > thead > tr > th:last-child, | |
.table-responsive > .table-bordered > tbody > tr > th:last-child, | |
.table-responsive > .table-bordered > tfoot > tr > th:last-child, | |
.table-responsive > .table-bordered > thead > tr > td:last-child, | |
.table-responsive > .table-bordered > tbody > tr > td:last-child, | |
.table-responsive > .table-bordered > tfoot > tr > td:last-child { | |
border-right: 0; | |
} | |
.table-responsive > .table-bordered > tbody > tr:last-child > th, | |
.table-responsive > .table-bordered > tfoot > tr:last-child > th, | |
.table-responsive > .table-bordered > tbody > tr:last-child > td, | |
.table-responsive > .table-bordered > tfoot > tr:last-child > td { | |
border-bottom: 0; | |
} | |
} | |
@media print { | |
.visible-print { | |
display: block !important; | |
} | |
table.visible-print { | |
display: table; | |
} | |
tr.visible-print { | |
display: table-row !important; | |
} | |
th.visible-print, | |
td.visible-print { | |
display: table-cell !important; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment