0

如何使用 Bootstrap 制作固定表格单元格，并隐藏 bootstrap.overflow？我试过这个，但数据垂直向下：

table {
  table-layout: fixed;
}
table th,
table td {
  overflow: hidden;
}

我有 10 列和这样的样式：

<table class="table table-bordered">
    <thead class="mbhead">
        <tr class="mbrow">
            <th style="width:10px"></th>
            <th style="width:10%;">A</th>
            <th style="width:10%;">B</th>
            <th style="width:10%;">C</th>
            <th style="width:10%;">D</th>
            <th style="width:10%;">E</th>
            <th style="width:10%;">F</th>
            <th style="width:10%;">G</th>
            <th style="width:10%;">H</th>
            <th style="width:10%;">I</th>
            <th style="width:10%;">J</th>
        </tr>
    </thead>
    <tbody>
        //other contents...
        </body>
</table>
4

3 回答 3

0

您应该将 css 属性 white-space 设置为“nowrap”

table th, table td { overflow: hidden; white-space: nowrap }
于 2014-02-06T16:59:24.523 回答
0

溢出：隐藏仅适用于块级元素，因此您可以使您的 TH 和 TD 元素显示：块或（可能更好）将 div 放在它们中设置溢出：隐藏在 DIV 上。

这是一个显示显示的示例：TD/TH 上设置的块：http: //jsfiddle.net/YB4yU/

th, td {
    overflow: hidden;
    width: 100px;
    height: 50px;
    display: block;
}
于 2013-03-01T09:17:29.310 回答
0

请检查这是否是您想要的。我用过div。让我知道它是否有帮助。你可以看到我使用了 2 个 div。在第一个 div 我设置为溢出隐藏

<div  style="overflow: hidden; margin-left: 20px; height: 504px;">

在这个 div 里面我使用了另一个 div

 <div id="product"  style="overflow: auto;height: 350px;">

小提琴的链接在这里

于 2013-03-01T08:13:45.433 回答