如何设置overflow:hidden使元素两侧溢出且保持水平居中？

我明白你的需求啦——现在innerTable溢出时只会往右边跑，你想让它在td里保持水平居中，溢出部分均匀分布在左右两侧对吧？下面给你具体的解决方法：

核心思路 #

问题出在默认情况下，td里的内容是左对齐的，所以宽于td的innerTable只会向右溢出。我们只需要让td的内容水平居中，同时确保溢出部分不会被隐藏，就能实现你要的效果。

修改后的代码示例 #

CSS 部分

.outerTable {
  table-layout: fixed;
  /* 移除overflow:hidden，否则溢出部分会被直接隐藏，看不到两侧效果 */
}
.outerTable td {
  text-align: center; /* 关键：让td内的所有内容水平居中 */
}
.innerTable {
  /* 保留你原来的宽高设置即可 */
}

HTML 部分

<table class="outerTable" width="200px" height="200px" align="center" border="1">
  <tr>
    <td valign="top">
      <table class="innerTable" width="800px" height="100px" border="1">
        <!-- 这里放你innerTable的内容 -->
        <tr>
          <td>示例单元格1</td>
          <td>示例单元格2</td>
          <td>示例单元格3</td>
          <td>示例单元格4</td>
          <td>示例单元格5</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

原理说明 #

当给td设置text-align: center后，里面的innerTable会以td的水平中心线为基准对齐。哪怕innerTable的宽度远大于td，它也会保持居中状态，超出td的部分就会均匀分布在左右两侧，完美符合你的需求~

另外提醒一下：HTML里的align属性属于旧标准写法，用CSS的text-align来控制对齐会更规范哦。

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