引导固定表单元格

Bootstrap Fixed Table Cell

本文关键字：表单 单元格      更新时间：2023-09-26

我如何使用Bootstrap使一个固定的表单元格，与Bootstrap。溢出隐藏吗?我试过这个，但数据是垂直向下的:

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>

请检查这是否是您想要的。我用过div，如果有用请告诉我。你可以看到我用了2个div。第一个div设置为溢出隐藏

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

在这个div中我使用了另一个div

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

链接到这里

overflow: hidden只适用于块级元素，所以你可以让你的TH和TD元素显示:block，或者(可能更好)在它们里面放一个div。

下面的例子显示了TD/TH上的display:块设置:http://jsfiddle.net/YB4yU/

th, td {
    overflow: hidden;
    width: 100px;
    height: 50px;
    display: block;
}

你应该设置css属性white-space为"nowrap"

table th, table td { overflow: hidden; white-space: nowrap }
相关文章：