Question

我有一个看起来像这样的表：

我想要的是水平居中的底行，所以它看起来像这样：

我该怎么做呢？请注意，该表将是动态的，并且在最后一行中可以包含偶数或奇数个元素。

<table class="dna-table">
  <tr class="dna-row">
    <td class="dna-element"><p class="symbol">Co</p></td>
    <td class="dna-element"><p class="symbol">Cn</p></td>
    <td class="dna-element"><p class="symbol">En</p></td>
    <td class="dna-element"><p class="symbol">Ps</p></td>
    <td class="dna-element"><p class="symbol">Gr</p></td>
  </tr>
  <tr class="dna-row">
    <td class="dna-element"><p class="symbol">Pr</p></td>
    <td class="dna-element"><p class="symbol">Rs</p></td>
    <td class="dna-element"><p class="symbol">In</p></td>
   </tr>
 </table>

CSS

.dna-table {

}

.dna-row {
  text-align: center;
  margin: auto;
  width: 100%;
}

.dna-element {
  border: 1px solid gray;
  width: 100px;
  height: 120px;
  text-align: center;
  margin: auto;
 }

.symbol {
  font-size: 30px;
  font-weight: bold;
}

Answer 1

您可以在三个td之前和之后添加空tds https://jsfiddle.net/czyuyt05/3/

<table class="dna-table">
  <tr class="dna-row">
    <td class="dna-element"><p class="symbol">Co</p></td>
    <td class="dna-element"><p class="symbol">Cn</p></td>
    <td class="dna-element"><p class="symbol">En</p></td>
    <td class="dna-element"><p class="symbol">Ps</p></td>
    <td class="dna-element"><p class="symbol">Gr</p></td>
  </tr>
  <tr class="dna-row">
    <td></td>
    <td class="dna-element"><p class="symbol">Pr</p></td>
    <td class="dna-element"><p class="symbol">Rs</p></td>
    <td class="dna-element"><p class="symbol">In</p></td>
    <td></td>
   </tr>
 </table>

Answer 2

再次编辑（对不起，编辑的小提琴没有被保存）：

https://jsfiddle.net/egssk58w/6/

使用flexbox，没有表格（div而不是表格元素），也没有行。

<div class="dna-table">
  <div class="dna-element">
    <p class="symbol">Co</p>
  </div>
  <div class="dna-element">
    <p class="symbol">Cn</p>
  </div>
  <div class="dna-element">
    <p class="symbol">En</p>
  </div>
  <div class="dna-element">
    <p class="symbol">Ps</p>
  </div>
  <div class="dna-element">
    <p class="symbol">Gr</p>
  </div>
  <div class="dna-element">
    <p class="symbol">Pr</p>
  </div>
  <div class="dna-element">
    <p class="symbol">Rs</p>
  </div>
  <div class="dna-element">
    <p class="symbol">In</p>
  </div>
</div>

CSS：

.dna-table {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.dna-element {
  flex: 0 0 auto;
  border: 1px solid gray;
  width: 100px;
  height: 120px;
  text-align: center;
}

.symbol {
  font-size: 30px;
  font-weight: bold;
}

Answer 3

我能够通过在表格中包装每一行并在表格上设置margin: auto来解决这个问题：

https://jsfiddle.net/czyuyt05/4/

<table class="dna-table">
  <table class="dna-table">
    <tr class="dna-row">
      <td class="dna-element"><p class="symbol">Co</p></td>
      <td class="dna-element"><p class="symbol">Cn</p></td>
      <td class="dna-element"><p class="symbol">En</p></td>
      <td class="dna-element"><p class="symbol">Ps</p></td>
      <td class="dna-element"><p class="symbol">Gr</p></td>
      </tr>
    </table>
  <table class="dna-table">
    <tr class="dna-row">
      <td class="dna-element"><p class="symbol">Pr</p></td>
      <td class="dna-element"><p class="symbol">Rs</p></td>
     </tr>
   </table>
 </table>

CSS：

.dna-table {
  margin: auto;
}

水平居中的表格行

3 个答案: