html - 如何根据表格格式结构中的thead设置宽度？

Question

我正在研究表格结构 html，我想在我的结构中设置我的设计!!我有问题我的表格格式宽度是根据正文内容设置的!

我的问题是如何设置标题的宽度？这是我的代码。

<table>
  <thead>
    <tr>
      <td>Document name</td>
      <td>Category</td>
      <td>Sub category</td>
      <td>Status</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Indisoft – RX Office and Thinagee- 401K Payment </td>
      <td>admin</td>
      <td>admin-sub</td>
      <td>published</td>
    </tr>
  </tbody>
</table>

你可以看到我的输出: enter image description here

Answer 1

在 thead 中的任何 td 或 th 标签上设置 style，它将应用列中的所有单元格。

在下面的示例中，我使用了内联样式，但这不是必需的。您也可以为此使用 CSS 类。

此外，您应该将 thead 中的 td 替换为 th 元素。

table td {
  border: 1px black solid;
}

<table>
<thead>
    <tr>
        <td style="width: 50px">Document name</td>
        <td>Category</td>
        <td>Sub category</td>
        <td>Status</td>
    </tr> 
</thead>
<tbody>
    <tr>
        <td>Indisoft – RX Office and Thinagee- 401K Payment </td>
        <td>admin</td>
        <td>admin-sub</td>
        <td>published</td>
    </tr>
</tbody>