只能垂直滚动的表格单元格

Question

我正在使用以下CSS和bootstrap 3使表格单元垂直滚动

 #scrollable { width: 100%; height: 100%; margin: 0; padding: 0; overflow: auto; } 

 <table table table-condensed table-hover style="table-layout: fixed;" > <tr> <td> <div id="scrollable">something .................................long</div> </td> </tr> </table> 

它似乎只能水平滚动（只是不在此片段中滚动）。 我尝试过上述限制，但没有运气。 有什么建议么 ？

Answer 1

使用溢出y

#scrollable  {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

Answer 2

首先使表主体和表头显示为块，然后尝试溢出

检查以下示例...

<table>
<tableheader>
<tr>
    <th>Head 1</th>
    <th>Head 2</th>
    <th>Head 3</th>
    <th>Head 4</th>
    <th>Head 5</th>
</tr>
</tableheader>
<tablebody>
<tr>
    <td>Content 1</td>
    <td>Content 2</td>
    <td>Content 3</td>
    <td>Content 4</td>
    <td>Content 5</td>
</tr>
</tablebody>
</table>

CSS：

tableheader, tablebody { display: block; }

tablebody {
    height: 100px;       
    overflow-y: auto;    
    overflow-x: hidden;  
}

如果您需要在包含太大数据的单元格中使用滚动条，请在HTML表格数据标签中使用以下内容

<td width="500" height="300">
 <div style="width: 500px; height: 300px; overflow-y: auto; overflow-x: hidden;">
 if the cell contains too large data it will appear the scrollbar
 </div>
</td>

Answer 3

这是您的问题的示例。

#scrollable  {
---------------
---------------
---------------
overflow-y: auto;
overflow-x: hidden;
}