css th宽度不起作用

CSS 中的 th 元素是用来定义表格的表头单元格的，它们通常用于在表格中添加标题行，使其更易于理解。然而，当我们尝试修改 th 元素的宽度时，可能会遇到宽度不起作用的问题。

    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th style="width: 100px;">年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>20</td>
          <td>男</td>
        </tr>
      </tbody>
    </table>

上述代码中演示了一个简单的表格及其表头。我们在第二个 th 元素中尝试添加宽度属性，并将其设置为 100 像素。但实际效果是，th 的宽度并没有变化。

原因是，当我们设置 th 元素的宽度时，该元素实际上是一个块级元素，其默认的 display 值为 table-cell。这表明，th 元素默认是按照表格单元格大小来进行布局的。因此，无论我们如何设置宽度属性，th 的宽度都会自动调整以适应其所包含的内容。

为了解决这个问题，我们可以通过将 th 元素的 display 设置为 block 来改变它的默认布局，然后就可以使用 CSS 的 width 属性来指定其宽度了。

    th {
       display: block;
       width: 100px;
    }

上述代码定义了一个新的 CSS 规则，使得 th 元素的 display 属性被重新设置为 block，并在该元素上添加了 width 属性，以控制其宽度。现在，我们就可以成功地将 th 元素的宽度设置为 100 像素了。