HTML4+CSS2下消除两TD间距并保持100%高度无溢出的实现

问题出在表格单元格宽度未明确设置，导致浏览器自动分配空间时出现异常留白。以下是符合Web1.0风格的纯HTML4+CSS2解决方案：

完整修复代码 #

CSS 部分

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

table {
  width: 100%;
  height: 100%;
  border-spacing: 0;
  table-layout: fixed; /* 固定表格布局，Web1.0常用手段，避免宽度计算异常 */
}

td {
  padding: 0;
  margin: 0;
  border: 0; /* 清除td默认样式干扰 */
}

#header {
  height: 57px;
  background-color: #ccc;
}

#sidebar-td {
  width: 150px; /* 直接给侧边栏单元格指定宽度 */
}

#sidebar {
  background-color: #f4f4f4;
  height: 100%;
}

#content {
  background-color: #eaeaea;
  height: 100%;
  overflow-y: auto;
}

HTML 部分

<table cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top" colspan="2" id="header">Header</td>
  </tr>
  <tr>
    <td valign="top" id="sidebar-td">
      <div id="sidebar">sidebar</div>
    </td>
    <td valign="top">
      <div id="content">content</div>
    </td>
  </tr>
</table>

关键调整说明 #

1. 添加table-layout: fixed：强制表格按指定宽度分配单元格空间，避免浏览器自动计算时出现的留白，这是Web1.0时代解决表格布局兼容性的标准操作。
2. 给侧边栏单元格设置宽度：将侧边栏的固定宽度从div转移到对应的<td>上，确保表格能准确识别该列宽度，剩余空间自动分配给内容栏。
3. 重置td默认样式：清除浏览器自带的padding、margin和边框，彻底消除额外间距干扰。
4. 移除冗余的#main样式：原代码中#main的width:100%属于冗余设置，表格行默认会占满表格宽度，移除后避免布局冲突。

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