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/

我希望第3列的内容不会扩展表格的高度，并且它的内容可以滚动（使用垂直滚动）：

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

Answer 1

一种方法是将div放在rowspannig td中，并根据max-height值直接设置其rowspan CSS值（行* coff，请参阅代码）。

<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。如果您需要更多解释，欢迎您。

编辑：

删除了不需要的样式
直接造型
将10em div宽度替换为100%
设置改进的ul样式
更新了小提琴。
有更多行的示例，添加了一个coeff（更新的小提琴）。

Answer 2

尝试使用css作为你的最后一个col在

中的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 3

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

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

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

3 个答案: