CSS - 如果第二个 <td> 是多行的,如何修复 table 中的第一个 <td>?
CSS - how to fix first <td> in table on top if the second <td> is multiline?
在下面的代码中,您将看到第一个 td
中的 "Upload image" 文本已向下移动(因为下一个 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>
使用下面的代码,您可以在第一行的顶部实现上传图片
<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>
将 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>
你需要这个吗?
<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>
在下面的代码中,您将看到第一个 td
中的 "Upload image" 文本已向下移动(因为下一个 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>
使用下面的代码,您可以在第一行的顶部实现上传图片
<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>
将 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>
你需要这个吗?
<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>