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

Question

我正在练习使用 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

Answer 1

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

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