在表格的左右对齐列中创建等距的列

Question

我的表具有左右对齐的列，我需要在列内保持相等的间距。

类似

justify-content: space-between 

但最好没有flexbox和网格，只能通过html表。

.mtable {
  width: 100%;
  border: none;
  table-layout: fixed;
  font: normal 13px Arial, sans-serif;
}

.mtable th {
  padding: 10px;
  text-align: left;
  background-color: #ddd;
}

.mtable td {
  border-top: solid 1px #DADEE6;
  padding: 10px;
}

td:last-child {
  text-align: right;
}

td:nth-child(n+3) {
  text-align: right;
}

<table class="mtable">
  <tr>
    <td>Name</td>
    <td>Plaftorm</td>
    <td>Views</td>
    <td>Shows</td>
    <td>Fillrate</td>
    <td>Status</td>
  </tr>
  <tr>
    <td>Telegram</td>
    <td>Android</td>
    <td>60 011"</td>
    <td>40 631</td>
    <td>70 %</td>
    <td>On moderation</td>
  </tr>
  <tr>
    <td>WhatsApp</td>
    <td>iOS</td>
    <td>124 289"</td>
    <td>93 431</td>
    <td>43 %</td>
    <td>Active</td>
  </tr>
</table>

Answer 1

您的列已经具有相等的大小和它们之间的相等的间距，只是因为文字没有延伸到列的边缘而没有那么明显。在每个单元格周围添加边框将证明它们完全相同；

您无需执行任何操作即可确保它们之间的距离相同-已经存在。

.mtable {
  width: 100%;
  border: none;
  table-layout: fixed;
  font: normal 13px Arial, sans-serif;
}

.mtable th {
  padding: 10px;
  text-align: left;
  background-color: #ddd;
}

.mtable td {
  border-top: solid 1px #DADEE6;
  padding: 10px;
  border: 1px solid black; /* Added */
}

td:last-child {
  text-align: right;
}

td:nth-child(n+3) {
  text-align: right;
}

<table class="mtable">
  <tr>
    <td>Name</td>
    <td>Plaftorm</td>
    <td>Views</td>
    <td>Shows</td>
    <td>Fillrate</td>
    <td>Status</td>
  </tr>
  <tr>
    <td>Telegram</td>
    <td>Android</td>
    <td>60 011"</td>
    <td>40 631</td>
    <td>70 %</td>
    <td>On moderation</td>
  </tr>
  <tr>
    <td>WhatsApp</td>
    <td>iOS</td>
    <td>124 289"</td>
    <td>93 431</td>
    <td>43 %</td>
    <td>Active</td>
  </tr>
</table>

Answer 2

如果您知道有多少列，可以执行以下操作：

.mtable td {
  width: 10%
}

取决于您拥有多少列，取决于％值。

所以对于6列表，它是：

.mtable td {
 width: 16.6666666667%;
}