git.fiddlerwoaroof.com
less/tables.less
489b3d20
 //
 // Tables.less
 // Tables for, you guessed it, tabular data
 // ----------------------------------------
 
 
 // BASE TABLES
 // -----------------
 
 table {
   max-width: 100%;
   background-color: @tableBackground;
   border-collapse: collapse;
   border-spacing: 0;
 }
 
 // BASELINE STYLES
 // ---------------
 
 .table {
   width: 100%;
   margin-bottom: @baseLineHeight;
   // Cells
   th,
   td {
     padding: 8pt;
     line-height: @baseLineHeight;
     text-align: left;
     vertical-align: top;
     border-top: 1pt solid @tableBorder;
   }
   th {
     font-weight: bold;
   }
   // Bottom align for column headings
   thead th {
     vertical-align: bottom;
   }
   // Remove top border from thead by default
   caption + thead tr:first-child th,
   caption + thead tr:first-child td,
   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;
   }
   // Account for multiple tbody instances
   tbody + tbody {
     border-top: 2pt solid @tableBorder;
   }
 }
 
 
 
 // CONDENSED TABLE W/ HALF PADDING
 // -------------------------------
 
 .table-condensed {
   th,
   td {
     padding: 4pt 5pt;
   }
 }
 
 
 // BORDERED VERSION
 // ----------------
 
 .table-bordered {
   border: 1pt solid @tableBorder;
   border-collapse: separate; // Done so we can round those corners!
   *border-collapse: collapsed; // IE7 can't round corners anyway
   border-left: 0;
   .border-radius(4pt);
   th,
   td {
     border-left: 1pt solid @tableBorder;
   }
   // Prevent a double border
   caption + thead tr:first-child th,
   caption + tbody tr:first-child th,
   caption + tbody tr:first-child td,
   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 {
     -webkit-border-top-left-radius: 4pt;
             border-top-left-radius: 4pt;
         -moz-border-radius-topleft: 4pt;
   }
   thead:first-child tr:first-child th:last-child,
   tbody:first-child tr:first-child td:last-child {
     -webkit-border-top-right-radius: 4pt;
             border-top-right-radius: 4pt;
         -moz-border-radius-topright: 4pt;
   }
   // 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 {
     .border-radius(0 0 0 4pt);
     -webkit-border-bottom-left-radius: 4pt;
             border-bottom-left-radius: 4pt;
         -moz-border-radius-bottomleft: 4pt;
   }
   thead:last-child tr:last-child th:last-child,
   tbody:last-child tr:last-child td:last-child {
     -webkit-border-bottom-right-radius: 4pt;
             border-bottom-right-radius: 4pt;
         -moz-border-radius-bottomright: 4pt;
   }
 }
 
 
 // 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: @tableBackgroundAccent;
     }
   }
 }
 
 
 // HOVER EFFECT
 // ------------
 // Placed here since it has to come after the potential zebra striping
 .table {
   tbody tr:hover td,
   tbody tr:hover th {
     background-color: @tableBackgroundHover;
   }
 }
 
 
 // TABLE CELL SIZING
 // -----------------
 
 // Change the columns
 table {
   .span1     { .tableColumns(1); }
   .span2     { .tableColumns(2); }
   .span3     { .tableColumns(3); }
   .span4     { .tableColumns(4); }
   .span5     { .tableColumns(5); }
   .span6     { .tableColumns(6); }
   .span7     { .tableColumns(7); }
   .span8     { .tableColumns(8); }
   .span9     { .tableColumns(9); }
   .span10    { .tableColumns(10); }
   .span11    { .tableColumns(11); }
   .span12    { .tableColumns(12); }
   .span13    { .tableColumns(13); }
   .span14    { .tableColumns(14); }
   .span15    { .tableColumns(15); }
   .span16    { .tableColumns(16); }
   .span17    { .tableColumns(17); }
   .span18    { .tableColumns(18); }
   .span19    { .tableColumns(19); }
   .span20    { .tableColumns(20); }
   .span21    { .tableColumns(21); }
   .span22    { .tableColumns(22); }
   .span23    { .tableColumns(23); }
   .span24    { .tableColumns(24); }
 }
 
 .tree {
   width: 100%;
   margin-bottom: @baseLineHeight;
   border: 1pt solid @treeHeaderBorder;
   thead th {
     padding: 8pt;
     line-height: @baseLineHeight;
     text-align: left;
     vertical-align: bottom;
     #gradient > .vertical(@treeHeaderHighlight, @treeHeader);
     border-bottom: 1pt solid lighten(@treeHeaderBorder, 5%);
     font-weight: bold;
     color: @white;
     text-shadow: 1pt 1pt 1pt hsla(0,0%,0%,0.5);
   }
   tbody td {
     padding: 8pt;
     line-height: @baseLineHeight;
     text-align: left;
     vertical-align: top;
     border-bottom: 1pt solid #EEE;
     background-color: lighten(@bodyBackground, 15%);
   }
   caption + thead tr:first-child th,
   caption + thead tr:first-child td,
   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;
   }
   tbody tr:last-child td{border-bottom:0;}
 }