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

使用overflow-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;
}

表格单元格只能垂直滚动

3 个答案: