【发布时间】：2014-09-07 01:18:40
【问题描述】：
我有一张如下所示的表格：
它是使用标准表结构构建的：
<table id="dashboard" class="table table-condensed table-hover table-striped table-bordered sortableTable responsive-table table-header-rotated">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Date Field</th>
<th class="rotate"><div><span>Attribute 1</span></div></th>
<th class="rotate"><div><span>Attribute 2</span></div></th>
<th class="rotate"><div><span>Attribute 3</span></div></th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Col 1">Data 1</td>
<td data-label="Col 2">Data 2</td>
<td data-label="Date Field" class="success">2014-07-03</td>
<td data-label="Attribute 1" class="success"><a href="#"> </a></td>
<td data-label="Attribute 2" class="success"><a href="#"> </a></td>
<td data-label="Attribute 3" class="success"><a href="#"> </a></td>
</tr>
<tr>
<td data-label="Col 1">Data 3</td>
<td data-label="Col 2">Data 4</td>
<td data-label="Date Field" class="warning">2014-06-03</td>
<td data-label="Attribute 1" class="success"><a href="#"> </a></td>
<td data-label="Attribute 2" class="warning"><a href="#"> </a></td>
<td data-label="Attribute 3" class="success"><a href="#"> </a></td>
</tr>
</tbody>
</table>
table-header-rotated 看起来像这样来获取垂直列标题
.table-header-rotated th.row-header{
width: auto;
}
.table-header-rotated td{
width: 10px;
vertical-align: middle;
text-align: center;
}
.table-header-rotated th.rotate{
height: 80px;
width: 10px;
position: relative;
vertical-align: bottom;
padding: 0;
font-size: 12px;
line-height: 0.8;
}
.table-header-rotated th.rotate > div{
position: relative;
top: 0px;
height: 100%;
-ms-transform:skew(0deg,0deg);
-moz-transform:skew(0deg,0deg);
-webkit-transform:skew(0deg,0deg);
-o-transform:skew(0deg,0deg);
transform:skew(0deg,0deg);
overflow: hidden;
}
.table-header-rotated th.rotate span {
-ms-transform:skew(0deg,0deg) rotate(270deg);
-moz-transform:skew(0deg,0deg) rotate(270deg);
-webkit-transform:skew(0deg,0deg) rotate(270deg);
-o-transform:skew(0deg,0deg) rotate(270deg);
transform:skew(0deg,0deg) rotate(270deg);
position: absolute;
bottom: 30px;
left: -20px;
display: inline-block;
text-align: left;
text-align: center;
}
当页面小于一定宽度时，它会折叠成这样：
这是使用这个 CSS 完成的：
@media
only screen and (max-width: 900px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
#dashboard table,
#dashboard thead,
#dashboard tbody,
#dashboard th,
#dashboard td,
#dashboard tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#dashboard thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#dashboard tr { border: 1px solid #ccc; }
#dashboard td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
vertical-align: left;
text-align: left;
}
#dashboard td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
/* Pull label from the data-label attribute */
content: attr(data-label);
}
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
padding: 0;
margin: 0;
width: 320px; }
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
width: 495px;
}
}
现在，我的问题是，当我从表格中删除 table-header-rotated 类并使用较小的屏幕时，折叠的表格看起来像我想要的样子：
我的问题似乎是这个 CSS 块：
.table-header-rotated td{
width: 10px;
vertical-align: middle;
text-align: center;
}
演示问题的小提琴： http://jsfiddle.net/38vXF/
它的工作原理（和非垂直标题）的 JSFiddle http://jsfiddle.net/zzUqL/1/
请记住，对于这两个小提琴，表格布局会根据窗口的大小而变化。
当页面较小并且媒体 CSS 正在呈现我的表格时，我如何才能完全删除这个 CSS 类 (table-header-rotated)？ 显然，我不需要垂直标题。
【问题讨论】：
-
为什么不把 CSS 包装在一个最小宽度的媒体查询中呢？喜欢
@media only screen and (min-width: 900px) {...} -
由于您没有标记 JS/jQuery，我知道您可能不是在寻找使用它的解决方案。但是，如果您决定采用这种方式，您可以使用fiddle 中的代码。
标签： css twitter-bootstrap