Bootstrap 响应式表列大小答案

【问题标题】：Bootstrap Responsive table columns sizesBootstrap 响应式表列大小
【发布时间】：2016-06-13 02:58:49
【问题描述】：

我有静态（在较低的屏幕上滚动时它保持在同一位置），由 Bootstrap 在响应表中固定大小的第一列（100px）。我想要的是让其他列的大小相同（其余空间：100%-100px）和最小宽度 css（所以当它降低响应时开始工作）。而且我不知道我会有多少非静态列，所以 col-md/xs.. 不合适。

在 photo 有日期应该共享剩余空间，但仅限于最小宽度，例如 80 像素。如果较低，那么响应应该可以工作。反正我要制定时间表。

代码来源：

<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 的大小。

【问题讨论】：

标签： html angularjs css twitter-bootstrap-3

【解决方案1】：

你看过这个（很棒的）相关问题和答案吗？

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>

【讨论】：

正如我所说的那样.. Col-md 和其他人将无法工作，因为我不知道那里会有多少 td.. 这取决于我从 db 获得的时间表

【解决方案2】：

我通过添加：

@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;
    }
 }

向任何人寻求帮助。

【讨论】：