Bootstrap/Stylus - 使表格列尽可能小

Posted 2023-03-05

【中文标题】Bootstrap/Stylus - 使表格列尽可能小

【英文标题】：Bootstrap/Stylus - Make Table Column as small as possible

【发布时间】：2014-04-02 17:26:28

【问题描述】：

我正在练习使用 Bootstrap 来让我的表格在我正在创建的搜索列表上做出响应，问题是我希望我的两个列尽可能小而不是大小相等。 在下图中，您可以看到 Date 和 Link 占用了比他们需要的更多的空间。我该如何解决这个问题？提前致谢！

html（截断）：

<div class="table-responsive">
    <table class="table table-striped table-hover table-bordered table-condensed">
        <tbody>
            <tr class="active" ng-repeat="s in results">
                <!-- <td class="hidden-xs hidden-sm">$index</td> -->
                <td class="hidden-xs hidden-sm">s.provider</td>
                <td>s.title</td>
                <td>s.date</td>
                <td class="hidden-xs hidden-sm">s.cat</td>
                <td><a href="s.link">D/L</a></td>
            </tr>
        </tbody>
    </table>
</div>

手写笔：

table
    table-layout fixed
    word-wrap break-word

【参考方案1】：

设置table-layout: auto; 应该可以解决问题。

这是一个演示：http://jsfiddle.net/NicoO/m3QWJ/1/