Question

我正在创建一个在表格中显示某些内容的网站，我希望它始终居中。它的中心是有3个TD，它是居中的，但我希望它在3 TD的中间只有一个TR，当它只有2个TD时。

我希望Test5和Test6位于另一个TR的中间，但我似乎无法弄清楚如何。

我的当前代码：

<html>

<style>
  #Center {
    text-align: center;
  }
  #CenterTable {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }
</style>

<div id="Center">

  <p>Testing Centered Table</p>

  <table id="CenterTable">

    <tr>

      <td>
        Test1
      </td>

      <td>
        Test2
      </td>

      <td>
        Test3
      </td>

    </tr>

    <tr>

      <td>
        Test4
      </td>

      <td>
        Test5
      </td>

    </tr>

  </table>

</div>

</html>

Answer 1

几乎不再使用表格了。您可以使用div框和flexbox设计来完成此任务。

下面是我认为你想要完成的代码片段，但是我使用了div和flexbox设计。

.box-wrap {
  background: #a00;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.test {
  background: #0a0;
  width: 33.33%;
  height: 5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box-wrap">
  <div class="test">
    test1
  </div>
  <div class="test">
    test2
  </div>
  <div class="test">
    test3
  </div>
  <div class="test">
    test4
  </div>
  <div class="test">
    test5
  </div>
</div>

中心表TR

1 个答案: