如何让表格单元格等宽显示?

510 阅读1分钟

"| 答案 | | ---- | | 使用CSS中的 table-layout: fixed 属性可以实现让表格单元格等宽显示。当设置了该属性后,表格将会根据第一行的单元格宽度来决定所有单元格的宽度,并且不会根据内容自动调整宽度。同时,我们可以使用 width 属性来设置每个单元格的宽度。以下是一个示例代码: |

<style>
  .table {
    table-layout: fixed;
    width: 100%;
  }

  .table th, .table td {
    width: 25%; /* 设置每个单元格的宽度为表格宽度的四分之一 */
    text-align: center;
    border: 1px solid black;
  }
</style>

<table class=\"table\">
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
      <th>表头4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
    <tr>
      <td>内容5</td>
      <td>内容6</td>
      <td>内容7</td>
      <td>内容8</td>
    </tr>
  </tbody>
</table>

以上代码中,我们通过设置 .table 类的样式来实现表格单元格等宽显示。.table 类设置了 table-layout: fixed 属性,以及每个单元格的宽度为表格宽度的四分之一。其中,table-layout: fixed 属性用于固定表格布局,使得所有单元格的宽度都相等。通过设置单元格宽度的百分比,我们可以根据表格的宽度来调整每个单元格的宽度比例。

在这个示例中,我们设置了一个包含四个表头和两个数据行的表格。通过使用以上的 CSS 样式,我们可以确保表格的单元格在显示时等宽,无论单元格中的内容是什么。

以上就是如何让表格单元格等宽显示的方法,通过使用 table-layout: fixed 属性和适当设置单元格的宽度,我们可以轻松实现表格单元格的等宽显示效果。"