如何使以下表格單元格的內容可滾動？

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/