Question

请看一下这个小提琴：

（这个问题与我昨天提出的问题不一样。今天，我需要将innerTable置于div中，而不是在td元素中。）

https://jsfiddle.net/dve3413/rxdhcsvc/51/

我试图让'无法'以'tddiv'为中心。 'tddiv'两边的溢出应该相等。 'innertable'应水平居中，垂直对齐。溢出也应该居中（左右相等）。垂直溢出应该全部下降。理想情况下，完成此任务的css可以包含在'tddiv'和'innerTable'中。

<table class="outerTable" align="center" border=1>
  <tr>
    <td valign=top>
      <div class="tddiv">
        <table class="innerTable" width=300px height=300px border=1 align=center>
        </table>
      </div>
    </td>
  </tr>
</table>

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

.innerTable {
  table-layout: fixed;
}

.tddiv {
  text-align: center;
  width: 200px;
  height: 200px;
}

Answer 1

您可以使用以下设置：

.innerTable {
  table-layout: fixed;
  background: #ddd;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

（z-index和background不必，我只是添加它们以使可见结果更加明显）

https://jsfiddle.net/afeetdjb/1/

Answer 2

尝试像这样使用flex

＆＃13;

.outerTable {
  table-layout: fixed;
  display:flex;
  justify-content:center;
  overflow:hidden;
  /*   overflow: hidden; */
}

.innerTable {
  table-layout: fixed;
}

.tddiv {
  text-align: center;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content:center;
}

＆＃13;

<table class="outerTable" align="center" border=1>
  <tr>
    <td valign=top>
      <div class="tddiv">
        <table class="innerTable" width=300px height=300px border=1 align=center>
        </table>
      </div>
    </td>
  </tr>
</table>

＆＃13;

如何将一个表元素置于div中？

2 个答案: