Greg-A
Reputation: 852
Align the tr of a table horizontally
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 ?
Upvotes: 1
Views: 103
Answers (3)
Aditya Pandey
Reputation: 1
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.
Upvotes: 0
Archit Gargi
Reputation: 685
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>Upvotes: 1
Sifat Haque
Reputation: 6057
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>Upvotes: 2
Related Questions
- Align <div>'s in <td> horizontally
- CSS way to horizontally align table
- HTML Table Alignment
- HTML Table alignment both ways
- How to horizontally align css table elements?
- Aligning table rows and columns
- aligning the table row in HTML
- How to center align a <td> in a <tr>?
- How to horizontally align columns in a table
- Html Table alignment right