如何在占满全屏的表格中仅为单个TD单元格添加垂直滚动条

解决方案 #

核心修改逻辑 #

表格单元格默认会根据内容自动撑开高度，所以直接给内部div加overflow属性不会生效，因为div没有明确的高度上限。我们可以通过定位规则让内部div自动填满单元格空间，无需设置固定尺寸即可适配任意屏幕大小。

第一步：重置页面根样式 #

首先给页面根元素添加如下样式，保证页面占满全屏且无全局滚动条：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

第二步：修改表格及单元格代码 #

修改后的完整代码如下：

<table style="width:100%; height:100%;" bgcolor="pink" cellspacing="0" cellpadding="0" class="alignment">
  <tr>
    <td align="left" bgcolor="red" colspan="2" height="150">topleft</td>
    <td align="right" bgcolor="yellow">topright</td>
  </tr>
  <tr>
    <td align="left" bgcolor="magenta" width="100">lowleft</td>
    <td align="center" bgcolor="blueviolet" width="100">lowcenter</td>
    <td align="center" bgcolor="teal" style="position: relative;">
      <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto;">
        lowright &nbsp;
        <!-- 这里放置站点内容，内容超出单元格高度时会自动出现垂直滚动条 -->
      </div>
    </td>
  </tr>
</table>

关键修改说明 #

• 给蓝绿色（teal）的td单元格添加position: relative，作为内部div的定位参照容器
• 内部div改用绝对定位，四个方向偏移都设为0，自动铺满整个td的可用空间，无需设置固定宽高
• 去掉了div多余的overflow-y重复属性，仅保留overflow-y: auto即可实现内容超出时才显示滚动条的效果
• 表格整体保持100%宽高，会自动适配浏览器窗口大小，无需设置固定尺寸

内容的提问来源于stack exchange，提问作者StarbuckM