Question

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

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

＆＃13;

<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>

＆＃13;

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

Answer 1

在style中的任意td或th标记上设置thead，它将适用于该列中的所有单元格。

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

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

＆＃13;

table td {
  border: 1px black solid;
}

＆＃13;

<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>

＆＃13;

Answer 2

您应该为每列设置样式宽度，在其他情况下，它会调整为正文大小。

例如：

table {
border: solid 1px #000;
}
table td:nth-child(1) {
    width: 200px;
    border-right: solid 1px #ccc;
}
table td:nth-child(2) {
    width: 100px;
    border-right: solid 1px #ccc;
}
table td:nth-child(3) {
    width: 150px;
    border-right: solid 1px #ccc;
}
table td:nth-child(2) {
    width: 50px;
}

<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>

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

2 个答案: