html - 如何调整 的宽度

Question

我有一个包含多个“部分”的表格。首先是标题，然后是表格数据。

<table>
    <tr> <th>First Name </th> </tr>
    <tr>
       <td>1</td>
       <td>Smith</td>
       <td>50</td>
    </tr>
    <tr>
       <td>2</td>
       <td>Jackson</td>
       <td>94</td>
    </tr>
    <tr>
       <td>3</td>
       <td>Johnson</td>
       <td>67</td>
    </tr>
    <tr>
       <td>4</td>
       <td>Nilson</td>
       <td>35</td>
    </tr>
</table>

<td> 的宽度始终与标题一样宽。如何调整 <td> 的宽度？

我试过给出 <td>一个类(class)并以这种方式调整它但没有运气。

Answer 1

那不是表格的工作方式。你要么给每列一个 th:

<tr>
    <th>ID</th>
    <th>First Name</th>
    <th>Age</th>
</tr>
<tr>
   <td>1</td>
   <td>Smith</td>
   <td>50</td>
</tr>
<tr>
   <td>2</td>
   <td>Jackson</td>
   <td>94</td>
</tr>
<tr>
   <td>3</td>
   <td>Johnson</td>
   <td>67</td>
</tr>
<tr>
   <td>4</td>
   <td>Nilson</td>
   <td>35</td>
</tr>

或者你使用 colspan:

<tr>
    <th colspan="3">First Name </th>
</tr>
<tr>
   <td>1</td>
   <td>Smith</td>
   <td>50</td>
</tr>
<tr>
   <td>2</td>
   <td>Jackson</td>
   <td>94</td>
</tr>
<tr>
   <td>3</td>
   <td>Johnson</td>
   <td>67</td>
</tr>
<tr>
   <td>4</td>
   <td>Nilson</td>
   <td>35</td>
</tr>