I am looking for a way to place differently sized buttons in table cells (1 button each in 1 cell) and have each button fill the cell completely, irrespective of its or other button’s font-sizes or other styling aspects.
I have found loads of tutorials on how to fill a single table cell with one button, but as soon as I add more buttons in other cells things do not work anymore for me (creating free space around some buttons, e.g. with smaller font sizes).
Problematic demo code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style id="compiled-css" type="text/css">
table {<!--from w w w. j ava2s . com-->
border-collapse:collapse;
}
tr, td {
border:2px solid;
}
tr {
height:auto;
text-align:center;
margin:0;
padding:0;
}
td {
padding:0px;
}
input, select {
margin:0;
padding:0;
height:100%;
width:100%;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td> <select> <option>Lorem i</option> <option>Lorem i</option> </select> </td>
<td> <input type="button" value="abcdefghijklmno" style="font-size:150%"> </td>
</tr>
<tr>
<td> <select style="font-size:200%"> <option>Lorem i</option> <option>Lorem i</option></select> </td>
<td> <input type="button" value="test"> </td>
</tr>
</tbody>
</table>
</body>
</html>
rendering as:
buttons not filling cells completely
Thanks for any hints on how to achieve completely filled table cells ( without any margins around the buttons inside the cells),
Joost
2
Answers
Found a working example after further trial and error, expanding upon @iame 's reply: