我有一个包含7列(td)的表。我正在设置一个固定的宽度,它可以在桌面上使用浏览器完美地工作。但是,当我调整浏览器大小以模拟手机甚至通过移动设备访问此页面时,它将不会考虑列宽。
我不会把整个html,但它基本上是:
<div class="table-responsive">
<table>
<tr>
<td class="w-large">Column 1</td>
<td class="w-medium">Column 2</td>
<td class="w-medium">Column 3</td>
<td class="w-medium">Column 4</td>
<td class="w-medium">Column 5</td>
<td class="w-medium">Column 6</td>
<td class="w-medium">Column 7</td>
</tr>
</table>
</div>
CSS:
.w-large {
width: 198px;
}
.w-medium {
width: 176px;
}
有没有办法在移动设备上保持列宽? bootstrap是否有一个特殊的类来执行此操作类似于表响应?
答案 0 :(得分:9)
.table-responsive应该就像你拥有它一样,在桌子周围的包装器上。宽度不会被保留,因为类会在{th,td等上放置white-space: nowrap;
等。请改为:
@media screen and (max-width: 767px) {
.alt-table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #dddddd;
-webkit-overflow-scrolling: touch;
}
}
HTML
<div class="alt-table-responsive">