Question

您将看到内部表的溢出向右移动。我希望溢出在两侧相等，以便内表在TD内水平居中，即使它溢出。（见下文）

.outerTable {
  table-layout: fixed;
  overflow: hidden;
}

<table class="outerTable" width=200px height=200px align="center" border=1>
  <tr>
    <td valign=top>
      <table class="innerTable" width=800px height=100px border=1 align=center>

      </table>
    </td>
  </tr>
</table>

Answer 1

以下是一个工作代码段，但未添加其他div或其他内容：

.outerTable {
  table-layout: fixed;
  /*overflow: hidden;*/
}

.innerTable {
  margin-left: 50%;
  transform: translateX(-50%);
}

<table class="outerTable" width=200px height=200px align="center" border=1>
  <tr>
    <td valign=top>
      <table class="innerTable" width=800px height=100px border=1>

      </table>
    </td>
  </tr>
</table>

我只添加了innerTable的CSS，
并删除overflow: hidden，以便我们可以看到table实际上是如何。

Answer 2

从overflow:hidden移除.outerTable并添加：

td {
  overflow: hidden;
}

Here jsfiddle已更新

如何设置溢出隐藏，以便两边溢出，元素保持居中？

2 个答案: