Question

如何使用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>

Answer 1

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

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

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

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

指向here

的链接

Answer 2

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

以下是显示在TD / TH上设置display：block的示例：http://jsfiddle.net/YB4yU/

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

Answer 3

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

table th, table td { overflow: hidden; white-space: nowrap }

Bootstrap固定表格单元格

3 个答案: