Bootstrap/Stylus - 使表格列尽可能小
Posted
技术标签:
【中文标题】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/
【讨论】:
以上是关于Bootstrap/Stylus - 使表格列尽可能小的主要内容,如果未能解决你的问题,请参考以下文章