CSS - 如果第二個​​是多行的，如何在頂部的表中首先修復​​？

Question

在下面的代碼中，您將看到第一個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>

Answer 1

的頂端使用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>

Answer 2

使用下面的代碼就可以實現這一上傳圖片在第一行

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

Answer 3

你需要這個嗎？

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