Bootstrap响应表列大小
问题描述:
我使用静态(在较低屏幕上滚动时它保持在同一位置),Bootstrap在响应表中固定大小的第一列(100px)。我想要的是使用最小宽度的css(其余的空间为100%-100px)其他列具有相同的大小(所以当它响应较低的响应开始工作时)。我不知道多少非静态列我会有这么col-md/xs ..是不适当的。Bootstrap响应表列大小
在 photo有日期的应该共享剩余空间,但只有最小宽度,例如80px。如果低于那么响应应该工作。无论如何,我想制定时间表。
代码源:
<div class="table-responsive">
<table class="table table-condensed table-bordered" ng-if="showTable">
<thead>
<tr style="background-color: #455A64; color: #FFFFFF;">
<th style="background-color:#F5F5F5;"></th>
<th ng-repeat="..." ng-if="..." id="{{...}}">{{ ... }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="..." ng-if="...">
<td style="text-align:center;background-color:#607D8B; color:#FFFFFF">{{ ... }}</td>
<td ng-repeat="..." rowspan="{{...}}" ng-if="...">{{ ... }} </td>
</tr>
</tbody>
</table>
<div>
还有一件事。我不想在td中输入文字以超过表格边框。所以它应该适应td的大小。
答
我想通了通过添加:
@media
only screen and (max-width: 767px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.table-responsive > .table > tbody > tr > td {
white-space: inherit;
min-width:200px;
}
}
TNX任何人的帮助。
答
你看看这个(很好)相关的问题和答案吗?
Bootstrap - how to set up fixed width for <td>?
<tr class="something">
<td class="col-md-2">A</td>
<td class="col-md-3">B</td>
<td class="col-md-6">C</td>
<td class="col-md-1">D</td>
</tr>
答
我想我说了你的意思,它可能需要一些调整。 伊莫这一个更好,那么你的解决方案,因为这一个检查屏幕的宽度和调整,你的只是2分辨率的作品。
jsfiddle.net/rffntdht
正如我在问题告诉..的Col-MD和其他人将无法正常工作CAS我不知道有多少TD将在那里。它依赖于时间表,我从数据库获取 –