// // Tables // -------------------------------------------------- // BASE TABLES // ----------------- // table { .table { max-width: 100%; border-collapse: collapse; border-spacing: 0; width: 100%; margin-bottom: 1.43em; // Cells th, td { padding: 8px; line-height: 1.43em; text-align: inherit; vertical-align: text-top; border-top: 1px solid var(--border-color, #ddd); } th { font-weight: bold; } // Bottom align for column headings thead th { vertical-align: bottom; } // Remove top border from thead by default colgroup + thead tr:first-child th, colgroup + thead tr:first-child td, thead:first-child tr:first-child th, thead:first-child tr:first-child td { border-top: 0; } } // BORDERED VERSION // ---------------- .table-bordered { border: 1px solid var(--border-color, #ddd); border-collapse: separate; // Done so we can round those corners! border-radius: 4px; th + th, td + td { border-left: 1px solid var(--border-color, #ddd); } // Prevent a double border 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; } // For first th or td in the first row in the first thead or tbody thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { border-radius: 4px 0 0 0; } thead:first-child tr:first-child th:last-child, tbody:first-child tr:first-child td:last-child { border-radius: 0 4px 0 0; } // For first th or td in the first row in the first thead or tbody thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child, tfoot:last-child tr:last-child td:first-child { border-radius: 0 0 0 4px; } thead:last-child tr:last-child th:last-child, tbody:last-child tr:last-child td:last-child, tfoot:last-child tr:last-child td:last-child { border-radius: 0 0 4px 0; } // Special fixes to round the left border on the first td/th colgroup + thead tr:first-child th:first-child, colgroup + tbody tr:first-child td:first-child { border-radius: 4px 0 0 0; } colgroup + thead tr:first-child th:last-child, colgroup + tbody tr:first-child td:last-child { border-radius: 0 4px 0 0; } } // ZEBRA-STRIPING // -------------- // Default zebra-stripe styles (alternating gray and transparent backgrounds) .table-striped { tbody { tr:nth-child(odd) td, tr:nth-child(odd) th { background-color: var(--tr-odd-bg-clr, #f9f9f9); } } } // HOVER EFFECT // ------------ // Placed here since it has to come after the potential zebra striping .table-hover { tbody { tr:hover td, tr:hover th { background-color: var(--tr-hover-bg-clr, #f5f5f5); } } }