I have a table :
but currently I get this display :
would there be a simple solution to be able to align the selects on the same level ?
CodePudding user response：
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>CodePudding user response：
Simplest Solution. You can just create another row for it.
table {
border: 1px solid black;
}<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>
</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>
<tr>
<td></td>
<td><span><button>Logout</button></span></td>
</tr>
</tbody>
</table>CodePudding user response：
You can do this by following ways,
- by doing
td {vertical-align: top;} - by adding logout button in another row
- by using id or class of the button you can set its margin and other attributes.
CodePudding user response：
You can add this code to CSS:
tr{
display: flex;
align-items: center;
height: 72px;
}
td:nth-child(2){
align-self: flex-end;
}
table {
border: 1px solid black;
}
tr {
display: flex;
align-items: center;
height: 72px;
}
td:nth-child(2) {
align-self: flex-end;
}<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>