如何使以下表格单元格的内容可滚动？

Question

我有如下表：

<table border="1"> 
<tr> 
    <td> 
    Company 1 
    </td> 
    <td> 
    Person 1 
    </td> 
    <td rowspan="3"> 
     <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li>   
     <li>Item 5</li> 
     </ul> 
    </td> 
</tr> 
<tr> 
    <td> 
    Company 2 
    </td> 
    <td> 
    Person 2 
    </td> 
</tr> 
<tr> 
    <td> 
    Company 3 
    </td> 
    <td> 
    Person 3 
    </td> 
</tr> 
</table> 

https://jsfiddle.net/q7n167ww/14/

我想第三列的内容不展开表的高度，它的内容是滚动（带垂直滚动）：

表格的行数未预先知晓，因此无法为表格或单元格设置固定的高度。我想要一个100％的CSS解决方案，没有JS。

Answer 1

尝试使用的CSS为你的最后关口与DIV中

HTML：

<table border="1"> 
<tr> 
    <td>A</td> 
    <td rowspan="3"> 
    <div id="col_overflow"> 
    1<br /> 
    2<br /> 
    3<br /> 
    4<br /> 
    5 
    </div> 
    </td> 
</tr> 
<tr> 
    <td>B</td> 
</tr> 
<tr> 
    <td>C</td> 
</tr> 
</table> 

CSS：

#col_overflow { 
overflow-y:scroll; 
height:5em; 
} 

Answer 2

因此，一个方法就是把一个div的rowspannig td内，并根据rowspan值（rows * coff，请参阅代码）直接设置其max-height CSS值。

<table border="1"> 
<tr> 
    <td> 
    Company 1 
    </td> 
    <td> 
    Person 1 
    </td> 
    <td class="rowspanning" rowspan="3"> 
     <div style="max-height:4.5em"> <!-- coeff 1.5 --> 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li>Item 4</li> 
      <li>...</li> 
     </ul> 
     </div> 
    </td> 
    </tr> 
</table> 

然后调整CSS是这样的：

td 
{ 
    box-sizing: border-box; 
    height:1.5em; 
} 

td.rowspanning div 
{ 
    width:100%; 
    overflow-y:scroll; 
    overflow-x:auto; 
} 

/* Optional : for nice display :) */ 
td.rowspanning div ul 
{ 
    margin:0 1em 0 1em; 
    padding:0 0 0 1em; 
} 

See Fiddle here。如果您需要更多解释，欢迎您。

编辑：

• 删除不需要的风格
• 将直接造型太
• 替换10emdiv宽度由100%
• 集改善ul造型
• 更新小提琴。
• 具有更多行的示例，添加了coeff（更新的小提琴）。

Answer 3

div.scrollable { 
        width: 100%; 
        height: 100%; 
        margin: 20px; 
        padding: 0; 
        overflow: auto; 
       } 

https://jsfiddle.net/q7n167ww/23/