CSS - 如果第二个 <td> 是多行的，如何修复顶部表格中的第一个 <td>？答案

【问题标题】：CSS - how to fix first <td> in table on top if the second <td> is multiline?CSS - 如果第二个 <td> 是多行的，如何修复顶部表格中的第一个 <td>？
【发布时间】：2017-04-29 13:24:27
【问题描述】：

在下面的这段代码中，您将看到第一个td 中的“上传图片”文本已向下移动（因为下一个td 中的多行输入）。但我希望将此文本固定在顶部。我该怎么做？

<table>
  <tr>
    <td> Upload Image </td>
    <td> <input type="file" name="images[]" /> <br>
      <input type="file" name="images[]" /> <br>
      <input type="file" name="images[]" /> <br>
      <input type="file" name="images[]" /> <br>
    </td>
  </tr>
</table>

【问题讨论】：

使用vertical-align: top td。

标签： html css vertical-alignment css-tables

【解决方案1】：

你需要这个吗？

<table>
<tr style="display:flex;">
<td style="flex:1;"> Upload Image </td>
<td> <input type="file" name="images[]" /> <br>
     <input type="file" name="images[]" /> <br>
     <input type="file" name="images[]" /> <br>
     <input type="file" name="images[]" /> <br>
</td>

【讨论】：

【解决方案2】：

将vertical-align: top 与td 结合使用 - 请参阅下面的演示：

table tr > td:first-child {
  vertical-align: top;
}

<table>
  <tr>
    <td>Upload Image</td>
    <td>
      <input type="file" name="images[]" />
      <br>
      <input type="file" name="images[]" />
      <br>
      <input type="file" name="images[]" />
      <br>
      <input type="file" name="images[]" />
      <br>
    </td>
  </tr>
</table>

【讨论】：

【解决方案3】：

使用下面的代码，您可以在第一行顶部实现上传图片

<table>
  <tr>
    <td colspan="4" valign="top"> Upload Image </td>
    <td> <input type="file" name="images[]" /> <br>
         <input type="file" name="images[]" /> <br>
         <input type="file" name="images[]" /> <br>
         <input type="file" name="images[]" /> <br>
    </td>
  </tr>
</table>

【讨论】：