I have a table :
https://codepen.io/greg59650/pen/GROajNp
<table role="table"><tbody>
<tr>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
<span><button>Logout</button></span>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
</tr></tbody></table>
if I add an element in the content of my td I would like all my selects to be aligned on the same level and the button below.
like this :
but currently I get this display :
would there be a simple solution to be able to align the selects on the same level ?
>Solution :
You can add vertical-align: top to your td.
td {
vertical-align: top;
}
table {border:1px solid black; }
td {
vertical-align: top;
}<table role="table"><tbody>
<tr>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td> <td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
<span><button>Logout</button></span>
</form>
</td> <td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
<td colspan="1">
<form>
<select name="pets" id="pet-select">
<option value="">choose</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</form>
</td>
</tr></tbody></table>