时间戳

首页 > 解决方案 > 在表格的左右对齐列中创建等距列

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

问题描述

我有左右对齐列的表格，我需要在列内设置相等的间距。

间距不等的图像

就像是

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>

标签： htmlcsshtml-table

解决方案

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

.mtable td {
  width: 10%
}

根据您拥有的列数，将取决于 % 值。

所以对于一个 6 列的表，它将是：

.mtable td {
 width: 16.6666666667%;
}

推荐阅读