git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/less/tables.less

   1 //
   2 // Tables
   3 // --------------------------------------------------
   4
   5
   6 table {
   7   max-width: 100%;
   8   background-color: @table-bg;
   9 }
  10 th {
  11   text-align: left;
  12 }
  13
  14
  15 // Baseline styles
  16 // ---------------
  17
  18 .table {
  19   width: 100%;
  20   margin-bottom: @line-height-computed;
  21   // Cells
  22   thead,
  23   tbody,
  24   tfoot {
  25     > tr {
  26       > th,
  27       > td {
  28         padding: @table-cell-padding;
  29         line-height: @line-height-base;
  30         vertical-align: top;
  31         border-top: 1px solid @table-border-color;
  32       }
  33     }
  34   }
  35   // Bottom align for column headings
  36   thead > tr > th {
  37     vertical-align: bottom;
  38   }
  39   // Remove top border from thead by default
  40   caption + thead,
  41   colgroup + thead,
  42   thead:first-child {
  43     tr:first-child {
  44       th, td {
  45         border-top: 0;
  46       }
  47     }
  48   }
  49   // Account for multiple tbody instances
  50   tbody + tbody {
  51     border-top: 2px solid @table-border-color;
  52   }
  53
  54   // Nesting
  55   .table {
  56     background-color: @body-bg;
  57   }
  58 }
  59
  60
  61
  62 // Condensed table w/ half padding
  63 // -------------------------------
  64
  65 .table-condensed {
  66   thead,
  67   tbody,
  68   tfoot {
  69     > tr {
  70       > th,
  71       > td {
  72         padding: @table-condensed-cell-padding;
  73       }
  74     }
  75   }
  76 }
  77
  78
  79
  80 // Bordered version
  81 // ----------------
  82
  83 .table-bordered {
  84   border: 1px solid @table-border-color;
  85   > thead,
  86   > tbody,
  87   > tfoot {
  88     > tr {
  89       > th,
  90       > td {
  91         border: 1px solid @table-border-color;
  92       }
  93     }
  94   }
  95 }
  96
  97
  98
  99 // Zebra-striping
 100 // --------------
 101
 102 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
 103 .table-striped {
 104   > tbody {
 105     > tr:nth-child(odd) {
 106       > td,
 107       > th {
 108         background-color: @table-bg-accent;
 109       }
 110     }
 111   }
 112 }
 113
 114
 115
 116 // Hover effect
 117 // ------------
 118
 119 // Placed here since it has to come after the potential zebra striping
 120 .table-hover {
 121   > tbody {
 122     > tr:hover {
 123       > td,
 124       > th {
 125         background-color: @table-bg-hover;
 126       }
 127     }
 128   }
 129 }
 130
 131
 132
 133 // Table cell sizing
 134 // -----------------
 135
 136 // Reset default table behavior
 137 table col[class^="col-"] {
 138   float: none;
 139   display: table-column;
 140 }
 141 table {
 142   td,
 143   th {
 144     &[class^="col-"] {
 145       float: none;
 146       display: table-cell;
 147     }
 148   }
 149 }
 150
 151
 152
 153 // Table backgrounds
 154 // -----------------
 155 // Exact selectors below required to override `.table-striped` and prevent
 156 // inheritance to nested tables.
 157
 158 .table > thead > tr,
 159 .table > tbody > tr,
 160 .table > tfoot > tr {
 161   > td.active,
 162   > th.active,
 163   &.active > td,
 164   &.active > th  {
 165     background-color: @table-bg-active;
 166   }
 167 }
 168
 169 // Contextual variants
 170 // -------------------
 171 .table-row-variant(success; @state-success-bg; @state-success-border);
 172
 173 .table-row-variant(danger; @state-danger-bg; @state-danger-border);
 174
 175 .table-row-variant(warning; @state-warning-bg; @state-warning-border);