/* ------------------- Basekit Template · Tables Fev . 2022 © Exactuflow http://basekit.exactusensu.pt Table of Contents · Tables · Tables . Editable · Tables . Styles · Tables . Styles . Bordered · Tables . Options · Tables . Options . Sortable · Tables . Options . Selectable · Tables . Options . Mouse-sensitive · Tables . Options . Alternated · Tables . Options . Multi-line · Tables . Controls · Tables . Visibility · Tables . Debug mode ------------------- */ /* Tables ----------------------------- */ .table{ width: 100%; border-collapse: collapse; margin-bottom: 30px; } /* Tables . Header */ .table thead tr th { text-align: left; vertical-align: top; border-bottom: 1px solid #e6e7e8; } .table thead tr th label { margin-bottom: 0px; display: block; float: left; } /* Tables . Header . Colors */ /* Tables . Header . Colors . Default */ .table thead tr th, .table.table-color-default thead tr th { border-bottom-color: #c9cacb; } /* Tables . Header . Colors . Primary */ .table.table-color-primary thead tr th { border-bottom-color: #b2dbea; } /* Tables . Header . Colors . Secondary */ .table.table-color-secondary thead tr th { border-bottom-color: #fff1b2; } /* Tables . Header . Colors . Red */ .table.table-color-red thead tr th { border-bottom-color: #ecc9c9; } /* Tables . Header . Colors . Green */ .table.table-color-green thead tr th { border-bottom-color: #c5e5ca; } /* Tables . Header . Colors . Blue */ .table.table-color-blue thead tr th { border-bottom-color: #d6e4ef; } /* Tables . Header . Colors . Orange */ .table.table-color-orange thead tr th { border-bottom-color: #fff0e1; } /* Tables . Header . Colors . Yellow */ .table.table-color-yellow thead tr th { border-bottom-color: #fff1c7; } /* Tables . Header . Colors . Grey */ .table.table-color-grey thead tr th { border-bottom-color: #f4f4f4; } /* Tables . Header . Colors . Black */ .table.table-color-black thead tr th { border-bottom-color: rgba(0, 0, 0, 0.1); } /* Tables . Header . Colors . White */ .table.table-color-white thead tr th { border-bottom-color: rgba(255, 255, 255, 0.1); } /* Tables . Body */ .table tbody tr td { text-align: left; vertical-align: middle; cursor: default; font-size: 90%; } /* Tables . Footer */ .table tfoot tr td { padding-top: 6px; text-align: center; } /* Tables . Editable ------------------ */ .table.table-type-editable.table-options-deletable thead tr th:last-child{ border-bottom-color: transparent; } .table.table-type-editable tbody tr td, .table.table-type-editable tbody tr td .textfield{ border: none; } .table.table-type-editable.table-options-multi-line thead tr th:last-child{ width: 1px; } .table.table-type-editable tbody tr td{ padding: 0px 0px 0px 0px !important; } /* Selected + Mouse sensitive */ .table.table-type-editable.table-options-selectable tbody tr:hover td, .table.table-type-editable.table-options-selectable tbody tr.selected td{ background-color: transparent !important; } /* Active cell wrapper */ .table-cell-wrapper{ background-color: #333333; } /* Cell alignments */ .table .left{ text-align: left; } .table .center{ text-align: center; } .table .right{ text-align: right; } .table .top{ vertical-align: top; } .table .middle{ vertical-align: middle; } .table .bottom{ vertical-align: bottom; } /* Cell types (overide) */ .table tr td.table-cell-type-currency-euro, .table tr td.table-cell-type-currency-dolar, .table tr td.table-cell-type-percent, .table tr td.table-cell-type-numeric{ padding-right: 18px; } .table tr td.table-cell-type-currency-euro, .table tr td.table-cell-type-currency-dolar, .table tr td.table-cell-type-percent, .table tr td.table-cell-type-numeric{ background-position: right center; background-repeat: no-repeat; background-color: transparent; } .table tr td.table-cell-type-currency-euro{ background-image: url(images/table-cell-type-currency-euro.png); } .table tr td.table-cell-type-currency-dolar{ background-image: url(images/table-cell-type-currency-dolar.png); } .table tr td.table-cell-type-percent{ background-image: url(images/table-cell-type-percent.png); } .table tr td.table-cell-type-numeric{ background-image: url(images/table-cell-type-numeric.png); } /* Textfields (overide) */ .table tbody tr td .textfield{ width: 100%; border: none; background-color: transparent; } .table tbody tr td .textfield:focus{ outline: none; } /* Textfields types (overide) */ .table tr td.table-cell-type-currency-euro .textfield, .table tr td.table-cell-type-currency-dolar .textfield, .table tr td.table-cell-type-percent .textfield, .table tr td.table-cell-type-numeric .textfield{ padding-right: 18px; text-align: right; } /* Textfields status (overide) */ .table tr td .textfield.mandatory{ background-image: url(images/table-textfield-mandatory.png) !important; background-position: right top !important; background-repeat: no-repeat; } .table tr td .textfield.valid{ background-image: url(images/table-textfield-valid.png) !important; background-position: right top !important; background-repeat: no-repeat; } .table tr td .textfield.invalid{ background-image: url(images/table-textfield-invalid.png) !important; background-position: right top !important; background-repeat: no-repeat; } /* Droplists (overide) */ .table tbody tr td .droplist .display{ border: none; color: #767676; background-color: transparent; } /* Switch buttons (overide) */ .table tbody tr td .button-switch{ margin: 0px 0px 0px 4px; } /* Tables . Styles -------------------- */ /* Tables . Styles . Bordered -------------- */ .table.table-style-bordered tbody tr td{ border-width: 1px; border-style: solid; border-top: none; border-left: none; } .table.table-style-bordered tbody tr td:first-child{ border-left-width: 1px; border-left-style: solid; } /* Tables . Styles . Bordered . Colors */ /* Tables . Styles . Bordered . Colors . Default */ .table.table-style-bordered tbody tr td, .table.table-color-default.table-style-bordered tbody tr td{ border-color: #c9cacb;} /* Tables . Styles . Bordered . Colors . Primary */ .table.table-color-primary.table-style-bordered tbody tr td{ border-color: #b2dbea;} /* Tables . Styles . Bordered . Colors . Secondary */ .table.table-color-secondary.table-style-bordered tbody tr td{ border-color: #fff1b2;} /* Tables . Styles . Bordered . Colors . Red */ .table.table-color-red.table-style-bordered tbody tr td{ border-color: #ecc9c9;} /* Tables . Styles . Bordered . Colors . Green */ .table.table-color-green.table-style-bordered tbody tr td{ border-color: #c5e5ca;} /* Tables . Styles . Bordered . Colors . Blue */ .table.table-color-blue.table-style-bordered tbody tr td{ border-color: #d6e4ef;} /* Tables . Styles . Bordered . Colors . Orange */ .table.table-color-orange.table-style-bordered tbody tr td{ border-color: #fff0e1;} /* Tables . Styles . Bordered . Colors . Yellow */ .table.table-color-yellow.table-style-bordered tbody tr td{ border-color: #fff1c7;} /* Tables . Styles . Alternated . Colors . Grey */ .table.table-color-grey.table-style-bordered tbody tr td{ border-color: #f4f4f4;} /* Tables . Styles . Bordered . Colors . Black */ .table.table-color-black.table-style-bordered tbody tr td{ border-color: rgba(0, 0, 0, 0.1);} /* Tables . Styles . Bordered . Colors . White */ .table.table-color-white.table-style-bordered tbody tr td{ border-color: rgba(255, 255, 255, 0.1);} /* Tables . Options ------------------- */ /* Tables . Options . Sortable -------------- */ .table.table-options-sortable thead tr th, .table.table-options-sortable thead tr th label { cursor: pointer; transition: 0.2s color ease-in-out; } .table.table-options-sortable thead tr th label { padding-right: 12px; background-size: 10px 10px; background-position: right center; background-repeat: no-repeat; } /* Tables . Sortable . Colors */ /* Tables . Sortable . Colors . Default */ .table.table-options-sortable thead tr th label { background-image: url(../media/buttons.table.sorting.neutral.default.png);} .table.table-options-sortable thead tr th.headerSortUp label { background-image: url(../media/buttons.table.sorting.asc.default.png);} .table.table-options-sortable thead tr th.headerSortDown label { background-image: url(../media/buttons.table.sorting.desc.default.png);} .table.table-options-sortable thead tr th:hover label, .table.table-options-sortable thead tr th.headerSortUp label, .table.table-options-sortable thead tr th.headerSortDown label { color: #000000;} /* Tables . Sortable . Colors . Primary */ .table.table-options-sortable.table-color-primary thead tr th label { background-image: url(../media/buttons.table.sorting.neutral.primary.png);} .table.table-options-sortable.table-color-primary thead tr th.headerSortUp label { background-image: url(../media/buttons.table.sorting.asc.primary.png);} .table.table-options-sortable.table-color-primary thead tr th.headerSortDown label{ background-image: url(../media/buttons.table.sorting.desc.primary.png);} .table.table-options-sortable.table-color-primary thead tr th:hover label, .table.table-options-sortable.table-color-primary thead tr th.headerSortUp label, .table.table-options-sortable.table-color-primary thead tr th.headerSortDown label { color: #0088ba;} /* Tables . Sortable . Colors . Secondary */ .table.table-options-sortable.table-color-secondary thead tr th label { background-image: url(../media/buttons.table.sorting.neutral.secondary.png);} .table.table-options-sortable.table-color-secondary thead tr th.headerSortUp label { background-image: url(../media/buttons.table.sorting.asc.secondary.png);} .table.table-options-sortable.table-color-secondary thead tr th.headerSortDown label{ background-image: url(../media/buttons.table.sorting.desc.secondary.png);} .table.table-options-sortable.table-color-secondary thead tr th:hover label, .table.table-options-sortable.table-color-secondary thead tr th.headerSortUp label, .table.table-options-sortable.table-color-secondary thead tr th.headerSortDown label { color: #ffd000;} /* Tables . Sortable . Colors . Red */ .table.table-options-sortable.table-color-red thead tr th label { background-image: url(../media/buttons.table.sorting.neutral.red.png);} .table.table-options-sortable.table-color-red thead tr th.headerSortUp label { background-image: url(../media/buttons.table.sorting.asc.red.png);} .table.table-options-sortable.table-color-red thead tr th.headerSortDown label { background-image: url(../media/buttons.table.sorting.desc.red.png);} .table.table-options-sortable.table-color-red thead tr th:hover label, .table.table-options-sortable.table-color-red thead tr th.headerSortUp label, .table.table-options-sortable.table-color-red thead tr th.headerSortDown label { color: #d45353;} /* Tables . Sortable . Colors . Green */ .table.table-options-sortable.table-color-green thead tr th label { background-image: url(../media/buttons.table.sorting.neutral.green.png);} .table.table-options-sortable.table-color-green thead tr th.headerSortUp label { background-image: url(../media/buttons.table.sorting.asc.green.png);} .table.table-options-sortable.table-color-green thead tr th.headerSortDown label { background-image: url(../media/buttons.table.sorting.desc.green.png);} .table.table-options-sortable.table-color-green thead tr th:hover label, .table.table-options-sortable.table-color-green thead tr th.headerSortUp label, .table.table-options-sortable.table-color-green thead tr th.headerSortDown label { color: #39b876;} /* Tables . Sortable . Colors . Blue */ .table.table-options-sortable.table-color-blue thead tr th label { background-image: url(../media/buttons.table.sorting.neutral.blue.png);} .table.table-options-sortable.table-color-blue thead tr th.headerSortUp label { background-image: url(../media/buttons.table.sorting.asc.blue.png);} .table.table-options-sortable.table-color-blue thead tr th.headerSortDown label { background-image: url(../media/buttons.table.sorting.desc.blue.png);} .table.table-options-sortable.table-color-blue thead tr th:hover label, .table.table-options-sortable.table-color-blue thead tr th.headerSortUp label, .table.table-options-sortable.table-color-blue thead tr th.headerSortDown label { color: #007ee5;} /* Tables . Sortable . Colors . Orange */ .table.table-options-sortable.table-color-orange thead tr th label { background-image: url(../media/buttons.table.sorting.neutral.orange.png);} .table.table-options-sortable.table-color-orange thead tr th.headerSortUp label { background-image: url(../media/buttons.table.sorting.asc.orange.png);} .table.table-options-sortable.table-color-orange thead tr th.headerSortDown label { background-image: url(../media/buttons.table.sorting.desc.orange.png);} .table.table-options-sortable.table-color-orange thead tr th:hover label, .table.table-options-sortable.table-color-orange thead tr th.headerSortUp label, .table.table-options-sortable.table-color-orange thead tr th.headerSortDown label { color: #ffaa54;} /* Tables . Sortable . Colors . Yellow */ .table.table-options-sortable.table-color-yellow thead tr th label { background-image: url(../media/buttons.table.sorting.neutral.yellow.png);} .table.table-options-sortable.table-color-yellow thead tr th.headerSortUp label { background-image: url(../media/buttons.table.sorting.asc.yellow.png);} .table.table-options-sortable.table-color-yellow thead tr th.headerSortDown label { background-image: url(../media/buttons.table.sorting.desc.yellow.png);} .table.table-options-sortable.table-color-yellow thead tr th:hover label, .table.table-options-sortable.table-color-yellow thead tr th.headerSortUp label, .table.table-options-sortable.table-color-yellow thead tr th.headerSortDown label { color: #ffea00;} /* Tables . Sortable . Colors . Grey */ .table.table-options-sortable.table-color-grey thead tr th label { background-image: url(../media/buttons.table.sorting.neutral.grey.png);} .table.table-options-sortable.table-color-grey thead tr th.headerSortUp label { background-image: url(../media/buttons.table.sorting.asc.grey.png);} .table.table-options-sortable.table-color-grey thead tr th.headerSortDown label { background-image: url(../media/buttons.table.sorting.desc.grey.png);} .table.table-options-sortable.table-color-grey thead tr th:hover label, .table.table-options-sortable.table-color-grey thead tr th.headerSortUp label, .table.table-options-sortable.table-color-grey thead tr th.headerSortDown label { color: #4d4d4d;} /* Tables . Sortable . Colors . Black */ .table.table-options-sortable.table-color-black thead tr th label { background-image: url(../media/buttons.table.sorting.neutral.black.png);} .table.table-options-sortable.table-color-black thead tr th.headerSortUp label { background-image: url(../media/buttons.table.sorting.asc.black.png);} .table.table-options-sortable.table-color-black thead tr th.headerSortDown label { background-image: url(../media/buttons.table.sorting.desc.black.png);} .table.table-options-sortable.table-color-black thead tr th:hover label, .table.table-options-sortable.table-color-black thead tr th.headerSortUp label, .table.table-options-sortable.table-color-black thead tr th.headerSortDown label { color: #000000;} /* Tables . Sortable . Colors . White */ .table.table-options-sortable.table-color-white thead tr th label { background-image: url(../media/buttons.table.sorting.neutral.white.png);} .table.table-options-sortable.table-color-white thead tr th.headerSortUp label { background-image: url(../media/buttons.table.sorting.asc.white.png);} .table.table-options-sortable.table-color-white thead tr th.headerSortDown label { background-image: url(../media/buttons.table.sorting.desc.white.png);} .table.table-options-sortable.table-color-white thead tr th:hover label, .table.table-options-sortable.table-color-white thead tr th.headerSortUp label, .table.table-options-sortable.table-color-white thead tr th.headerSortDown label { color: #ffffff;} /* Tables . Options . Selectable ------------ */ .table.table-options-selectable tbody tr{ user-select: none; -moz-user-select: none; -webkit-user-select: none; } .table.table-options-selectable.table-options-deletable tbody tr td:last-child{ background-color: transparent !important; } /* Selected */ .table.table-options-selectable tbody tr.selected td, .table.table-options-selectable.table-options-mouse-sensitive tbody tr.selected:hover td{ color: #FFFFFF; background-color: #444444; /* selected color (normal + hover) */ } /* Selected . Alternated (normal + hovered) */ .table.table-options-selectable.table-options-alternated tbody tr.selected.even td, .table.table-options-selectable.table-options-alternated.table-options-mouse-sensitive tbody tr.selected.even:hover td{ background-color: #393939; /* selected alternated color (normal + hover) */ } /* Tables . Options . Mouse-sensitive ------- */ /* Default . hover */ /* Tables . Mouse-sensitive . Colors . Default */ .table.table-options-mouse-sensitive tbody tr:hover td, .table.table-color-default.table-options-mouse-sensitive tbody tr:hover td { background-color: #e9e9ea !important; } /* Tables . Mouse-sensitive . Colors . Primary */ .table.table-color-primary.table-options-mouse-sensitive tbody tr:hover td { background-color: #d9edf5 !important; } /* Tables . Mouse-sensitive . Colors . Secondary */ .table.table-color-secondary.table-options-mouse-sensitive tbody tr:hover td { background-color: #fff8d9 !important; } /* Tables . Mouse-sensitive . Colors . Red */ .table.table-color-red.table-options-mouse-sensitive tbody tr:hover td { background-color: #f9e5e5 !important; } /* Tables . Mouse-sensitive . Colors . Green */ .table.table-color-green.table-options-mouse-sensitive tbody tr:hover td { background-color: #e1f4eb !important; } /* Tables . Mouse-sensitive . Colors . Blue */ .table.table-color-blue.table-options-mouse-sensitive tbody tr:hover td { background-color: #d9ecfb !important; } /* Tables . Mouse-sensitive . Colors . Orange */ .table.table-color-orange.table-options-mouse-sensitive tbody tr:hover td { background-color: #fff2e6 !important; } /* Tables . Mouse-sensitive . Colors . Yellow */ .table.table-color-yellow.table-options-mouse-sensitive tbody tr:hover td { background-color: #fffcd9 !important; } /* Tables . Mouse-sensitive . Colors . Grey */ .table.table-color-grey.table-options-mouse-sensitive tbody tr:hover td { background-color: #ededed !important; } /* Tables . Mouse-sensitive . Colors . Black */ .table.table-color-black.table-options-mouse-sensitive tbody tr:hover td { background-color: rgba(0, 0, 0, 0.1) !important; } /* Tables . Mouse-sensitive . Colors . White */ .table.table-color-white.table-options-mouse-sensitive tbody tr:hover td { background-color: rgba(255, 255, 255, 0.1) !important; } /* Tables . Options . Alternated ------------ */ /* Tables . Alternated . Colors */ /* Tables . Alternated . Colors . Default */ .table.table-options-alternated tbody tr:nth-child(even) td, .table.table-color-default.table-options-alternated tbody tr:nth-child(even) td { background-color: #f4f4f4; } /* Tables . Alternated . Colors . Primary */ .table.table-color-primary.table-options-alternated tbody tr:nth-child(even) td { background-color: #f2f9fb; } /* Tables . Alternated . Colors . Secondary */ .table.table-color-secondary.table-options-alternated tbody tr:nth-child(even) td { background-color: #fffdf2; } /* Tables . Alternated . Colors . Red */ .table.table-color-red.table-options-alternated tbody tr:nth-child(even) td { background-color: #fdf6f6; } /* Tables . Alternated . Colors . Green */ .table.table-color-green.table-options-alternated tbody tr:nth-child(even) td{ background-color: #f5fbf8; } /* Tables . Alternated . Colors . Blue */ .table.table-color-blue.table-options-alternated tbody tr:nth-child(even) td { background-color: #f2f8fe; } /* Tables . Alternated . Colors . Orange */ .table.table-color-orange.table-options-alternated tbody tr:nth-child(even) td { background-color: #fffbf6; } /* Tables . Alternated . Colors . Yellow */ .table.table-color-yellow.table-options-alternated tbody tr:nth-child(even) td { background-color: #fffef2; } /* Tables . Alternated . Colors . Grey */ .table.table-color-grey.table-options-alternated tbody tr:nth-child(even) td { background-color: #f6f6f6; } /* Tables . Alternated . Colors . Black */ .table.table-color-black.table-options-alternated tbody tr:nth-child(even) td { background-color: rgba(0, 0, 0, 0.05); } /* Tables . Alternated . Colors . White */ .table.table-color-white.table-options-alternated tbody tr:nth-child(even) td { background-color: rgba(255, 255, 255, 0.05); } /* Tables . Options . Multi-line ------------ */ /* Multi-line control */ .table tfoot tr.table-multi-line-control td *{ visibility: hidden; } .table.table-options-multi-line tfoot tr.table-multi-line-control td *{ visibility: visible; } .table.table-options-multi-line tfoot tr.table-multi-line-control td a.disabled{ color: #CCCCCC; cursor: default; } /* Hide template (overide) */ .table tfoot tr.table-row-template{ display: none; } /* Tables . Controls ------------- */ .table tbody tr .row-control{ font-size: 0px; white-space: nowrap; text-align: right; } /* Tables . Controls . Actions . Default */ .table tbody tr .row-control .action { display: inline-block; padding: 0px !important; color: #939598; text-align: center; border: 1px solid #939598 !important; border-radius: 50%; background-color: transparent; opacity: 0.5; font-family: PaperIcons; cursor: pointer; overflow: hidden; transition: 0.2s all ease-in-out; -webkit-tap-highlight-color: transparent !important; } .table tbody tr .row-control .action:hover { opacity: 1; color: #ffffff; background-color: #939598; } .table tbody tr .row-control .action:first-child { margin-left: 0px; } /* Tables . Controls . Actions . Disabled */ .table tbody tr .row-control .action.disabled, .table tbody tr .row-control .action.disabled:hover { opacity: 0.1; cursor: default; color: #939598 !important; background-color: transparent !important; } /* Tables . Controls . Actions . Icons */ .table tbody tr .row-control .action.delete::after { content: ""; } .table tbody tr .row-control .action.edit::after { content: ""; } .table tbody tr .row-control .action.view::after { content: ""; } .table tbody tr .row-control .action.duplicate::after { content: ""; } /* Tables . Controls . Actions . Customize */ /* Actions . Customize . Delete */ .table tbody tr .row-control .action.delete{ color: #d45353 !important; border-color: #d45353 !important; } .table tbody tr .row-control .action.delete:hover { color: #ffffff !important; background-color: #d45353 !important; } .table tbody tr .row-control .action.delete.disabled, .table tbody tr .row-control .action.delete.disabled:hover { color: #939598 !important; border-color: #939598 !important; background-color: transparent !important; } /* Tables . Controls . Actions . Sizes */ /* Tables . Actions . Extra small screens */ @media (min-width: 100px) { .table tbody tr .row-control .action { height: 16px !important; width: 16px !important; margin-left: 8px; font-size: 12px !important; line-height: 17px !important; } } /* Tables . Controls . Actions . Small screens */ @media (min-width: 768px) { .table tbody tr .row-control .action { height: 16px !important; width: 16px !important; margin-left: 8px; font-size: 12px !important; line-height: 17px !important; } .table tbody tr .row-control .action.xs-hidden { display: inline-block !important; } .table tbody tr .row-control .action.sm-hidden { display: none !important; } } /* Tables . Controls . Actions . Medium screens */ @media (min-width: 990px) { .table tbody tr .row-control .action { height: 16px !important; width: 16px !important; margin-left: 8px; font-size: 12px !important; line-height: 17px !important; } .table tbody tr .row-control .action.xs-hidden, .table tbody tr .row-control .action.sm-hidden { display: inline-block !important; } .table tbody tr .row-control .action.md-hidden { display: none !important; } } /* Tables . Controls . Actions . Large screens */ @media (min-width: 1200px) { .table tbody tr .row-control .action { height: 22px !important; width: 22px !important; margin-left: 6px; font-size: 16px !important; line-height: 23px !important; } .table tbody tr .row-control .action.xs-hidden, .table tbody tr .row-control .action.sm-hidden, .table tbody tr .row-control .action.md-hidden { display: inline-block !important; } .table tbody tr .row-control .action.lg-hidden { display: none !important; } } /* Tables . Visibility ---------------- */ /* Tables . Visibility . Default */ /* Visible rows and cells */ .table tr.visible { display: table-row; } .table th.visible, .table td.visible { display: table-cell; } /* Hidden rows and cells */ .table tr.hidden, .table th.hidden, .table td.hidden { display: none;} /* Tables . Visibility . Extra small screens */ @media screen and (min-width: 100px) { /* Visible rows and cells */ .table tr.xs-visible { display: table-row !important; } .table td.xs-visible { display: table-cell !important; } /* Hidden rows and cells */ .table tr.xs-hidden, .table th.xs-hidden, .table td.xs-hidden { display: none !important;} } /* Tables . Visibility . Small screens */ @media (min-width: 768px) { /* Visible rows and cells */ .table tr.xs-hidden, .table tr.sm-visible { display: table-row !important; } .table th.xs-hidden, .table td.xs-hidden, .table th.sm-visible, .table td.sm-visible { display: table-cell !important; } /* Hidden rows and cells */ .table tr.xs-visible, .table tr.sm-hidden, .table td.xs-visible, .table th.xs-visible, .table td.sm-hidden, .table th.sm-hidden { display: none !important;} } /* Tables . Visibility . Medium screens */ @media (min-width: 990px) { /* Visible rows and cells */ .table tr.xs-hidden, .table tr.sm-hidden, .table tr.md-visible { display: table-row !important; } .table td.xs-hidden, .table th.xs-hidden, .table td.sm-hidden, .table th.sm-hidden, .table td.md-visible, .table th.md-visible { display: table-cell !important; } /* Hidden rows and cells */ .table tr.xs-visible, .table tr.sm-visible, .table tr.md-hidden, .table td.xs-visible, .table th.xs-visible, .table td.sm-visible, .table th.sm-visible, .table td.md-hidden, .table th.md-hidden { display: none !important;} } /* Tables . Visibility . Large screens */ @media (min-width: 1200px) { /* Visible rows and cells */ .table tr.xs-hidden, .table tr.sm-hidden, .table tr.md-hidden, .table tr.lg-visible { display: table-row !important; } .table td.xs-hidden, .table th.xs-hidden, .table td.sm-hidden, .table th.sm-hidden, .table td.md-hidden, .table th.md-hidden, .table td.lg-visible, .table th.lg-visible { display: table-cell !important; } /* Hidden rows and cells */ .table tr.xs-visible, .table tr.sm-visible, .table tr.md-visible, .table tr.lg-hidden, .table th.xs-visible, .table td.xs-visible, .table th.sm-visible, .table td.sm-visible, .table th.md-visible, .table td.md-visible, .table th.lg-hidden, .table td.lg-hidden { display: none !important;} } @media print { .table tr.xs-hidden, .table tr.sm-hidden, .table tr.md-hidden, .table tr.lg-hidden { display: table-row !important; } .table td.xs-hidden, .table th.xs-hidden, .table td.sm-hidden, .table th.sm-hidden, .table td.md-hidden, .table th.md-hidden, .table td.lg-hidden, .table th.lg-hidden { display: table-cell !important; } } /* Tables . Extra small screens */ @media (min-width: 100px) { .table thead tr th, .table tbody tr td { padding: 4px; } .table tbody tr td { padding-top: 8px; padding-bottom: 8px; } } /* Tables . Small screens */ @media (min-width: 768px) { .table thead tr th, .table tbody tr td { padding: 6px; } .table tbody tr td { padding-top: 8px; padding-bottom: 8px; } } /* Tables . Medium screens */ @media (min-width: 990px) { .table thead tr th, .table tbody tr td { padding: 6px; } .table tbody tr td { padding-top: 8px; padding-bottom: 8px; } } /* Tables . Large screens */ @media (min-width: 1200px) { .table thead tr th, .table tbody tr td { padding: 6px; } .table tbody tr td { padding-top: 8px; padding-bottom: 8px; } } /* Tables . Debug mode ---------------- */ .debug .table, .debug .table * { border: 1px solid red; } .debug .table thead tr th label { border-color: blueviolet; } .table thead tr th.compact { width: 1px; white-space: nowrap; }