CSS - how to fix first <td> in table on top if the second <td> is multiline?

765 views Asked by At

In this code below you will see the "Upload image" text in first td has moved down (because of multiline input in next td). But I want is this text to be fixed at the top. How can I do it?

<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

There are 3 answers

0
kukkuz On BEST ANSWER

Use vertical-align: top to the td with text - see demo below:

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>

0
Darshak On

Using below code you can achieve that Upload Image in top of first row

<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>
0
Khoshtarkib On

Are you need this?

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