使用CSS定型表：列宽不正确

Question

table, thead, tbody {
    width: 100%;
}

table, th, tr, td {
    border: 1px solid #000;
    border-collapse: collapse;
}

td {
   width: 25% !important;
}

<table>
    <thead>
        <th>
            <td>ID</td>
            <td>Nome da conta</td>
            <td>Titular</td>
            <td>Saldo</td>
        </th>
    </thead>
    <tbody>
     ...
    </tbody>
</table>

我有一个有四列的表格，我希望它们具有相同的宽度，即每个列占据表格的25％。

我认为我的列不会占据每个表宽度的25％。即使我申请!important。

Answer 1

您没有以正确的方式使用语义标记。 在1265451代码中，您必须拥有thead和tr作为其子代。

然后，您可以在th

上应用{width: 25%;}

th

table,
thead,
tbody {
  width: 100%;
}

table,
th,
tr,
td {
  border: 1px solid #000;
  border-collapse: collapse;
}

th {
  width: 25% !important;
}

Answer 2

使用table-layout: fixed

table {
  table-layout: fixed;
  width: 100%;
}

table,
th,
tr,
td {
  border: 1px solid #000;
  border-collapse: collapse;
}

td {
  width: 25%;
}

<table>

  <tbody>
    <tr>
      <td>ID</td>
      <td>Nome da conta</td>
      <td>Titular</td>
      <td>Saldo</td>
    </tr>
  </tbody>
</table>

Answer 3

table {
  table-layout: fixed;
  width : 100% ;
}
td {
  text-align : center ;
  width: 25%;
}

<table border = "10">
    <tr>
      <td>Some Text</td>
      <td>Another Text</td>
      <td>Some Another Text</td>
      <td>A Very Long Text</td>
    </tr>
</table>