Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
tables.less 2.92 KiB
1 
//
2 
// Tables.less
3 
// Tables for, you guessed it, tabular data
4 
// ----------------------------------------
5
6
7 
// BASE TABLES
8 
// -----------------
9
10 
table {
11 
  max-width: 100%;
12 
  border-collapse: collapse;
13 
  border-spacing: 0;
14 
}
15
16 
// BASELINE STYLES
17 
// ---------------
18
19 
.table {
20 
  width: 100%;
21 
  margin-bottom: @baseLineHeight;
22 
  // Cells
23 
  th,
24 
  td {
25 
    padding: 8px;
26 
    line-height: @baseLineHeight;
27 
    text-align: left;
28 
    border-top: 1px solid #ddd;
29 
  }
30 
  th {
31 
    font-weight: bold;
32 
    vertical-align: bottom;
33 
  }
34 
  td {
35 
    vertical-align: top;
36 
  }
37 
  // Remove top border from thead by default
38 
  thead:first-child tr th,
39 
  thead:first-child tr td {
40 
    border-top: 0;
41 
  }
42 
  // Account for multiple tbody instances
43 
  tbody + tbody {
44 
    border-top: 2px solid #ddd;
45 
  }
46 
}
47
48
49
50 
// CONDENSED TABLE W/ HALF PADDING
51 
// -------------------------------
52
53 
.table-condensed {
54 
  th,
55 
  td {
56 
    padding: 4px 5px;
57 
  }
58 
}
59
60
61 
// BORDERED VERSION
62 
// ----------------
63
64 
.table-bordered {
65 
  border: 1px solid #ddd;
66 
  border-collapse: separate; // Done so we can round those corners!
67 
  *border-collapse: collapsed; // IE7 can't round corners anyway
68 
  .border-radius(4px);
69 
  th + th,
70 
  td + td,
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
th + td, td + th { border-left: 1px solid #ddd; } // Prevent a double border 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 { .border-radius(0 0 0 4px); } thead:last-child tr:last-child th:last-child, tbody:last-child tr:last-child td:last-child { .border-radius(0 0 4px 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: #f9f9f9; } } } // TABLE CELL SIZING // ----------------- // Change the columns .tableColumns(@columnSpan: 1) { float: none; width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; margin-left: 0; } 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); } }