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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22116702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 20:11:08  来源:igfitidea点击:

Bootstrap/Stylus - Make Table Column as small as possible

htmlcssangularjstwitter-bootstrapstylus

提问by Dustin

I'm practicing using Bootstrap to make my table responsive on a search list I'm creating, the issue is that two of my columns I'd like to make as small as possible instead of equal sized. In the picture below, you can see Date and Link take up more space then they need. How can I go about fixing this? Thanks in advance!

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

Title and Link are too big

标题和链接太大

HTML (Snipped):

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>

Stylus:

手写笔:

table
    table-layout fixed
    word-wrap break-word

回答by Nico O

setting table-layout: auto;should do the trick.

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

Here is a demo: http://jsfiddle.net/NicoO/m3QWJ/1/

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