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>一个班级，然后调整它，但没有运气。

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>

Answer 2

也许你正在寻找更像这样的东西：

<table>
  <thead>
    <tr>
      <th style="width: 30px"></th>
      <th style="width: 60px">First Name</th>
      <th style="width: 30px"></th>
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
</table>

如何调整宽度

2 个答案: