Permalink
Browse files

feat(table): basic styling for responsive tables

  • Loading branch information...
Freihofner, Katrin Freihofner, Katrin
Freihofner, Katrin authored and Freihofner, Katrin committed Jan 24, 2017
1 parent 3ac4422 commit e46bf8a894983c2fc330f72b69e72c3dfb0ea9a3
Showing with 72 additions and 2 deletions.
  1. +38 −0 src/table/samples/01-responsive-sample.html
  2. +34 −2 src/table/table.scss
@@ -0,0 +1,38 @@
<table class="table">
<thead>
<tr>
<th>deployment size</th>
<th>timeseries id</th>
<th>name</th>
<th>unit</th>
<th>aggregations</th>
<th>filters</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="deployment size">Small</td>
<td data-th="timeseries id">com.ruxit.builtin:host.cpu.idle</td>
<td data-th="name">CPU idle</td>
<td data-th="unit">%</td>
<td data-th="aggregations">min, max, sum, avg</td>
<td data-th="filters">osType</td>
</tr>
<tr>
<td data-th="deployment size">Medium</td>
<td data-th="timeseries id">com.ruxit.builtin:host.cpu.system</td>
<td data-th="name">CPU system</td>
<td data-th="unit">%</td>
<td data-th="name">min, max, sum, avg</td>
<td data-th="filters">osType</td>
</tr>
<tr>
<td data-th="deployment size">Large</td>
<td data-th="timeseries id">com.ruxit.builtin:host.cpu.load</td>
<td data-th="name">CPU load</td>
<td data-th="unit">%</td>
<td data-th="name">min, max, sum, avg</td>
<td data-th="filters">osType</td>
</tr>
</tbody>
</table>
View
@@ -22,13 +22,45 @@ $includedTable: false !default;
}
.table td {
height: 60px;
height: 40px;
}
@media (max-width: 920px) {
.table td {
display: block;
border: none;
border-top: 1px solid #eee;
position: relative;
padding-left: 50%;
width: auto;
padding-top: 11px;
white-space: normal;
}
.table td:before {
content: attr(data-th) " ";
text-align: left;
font-weight: normal;
font-size: 12px;
position: absolute;
border-right: 1px solid #eee;
height: 100%;
top: inherit;
left: 12px;
width: 46%;
white-space: inherit;
}
.table thead {
display: none;
}
}
.table thead th {
text-align: left;
font-weight: normal;
font-size: 13px;
font-size: 12px;
position: relative;
overflow: hidden;
}

0 comments on commit e46bf8a

Please sign in to comment.