I have a question about padding in tables. When I try to apply padding to thead or tr elements, it doesn't seem to work. The only way I can get padding to show up is by applying it directly to th or td elements. Is there a reason for this? And is there an easy way to add padding to the entire thead or tr without having to target each individual th and td?
<table>
<thead>
<tr>
<th>Destination</th>
<th>Size</th>
<th>Home Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>test 1</td>
<td>test 2</td>
<td>test 3</td>
</tr>
</tbody>
</table>
As you can see, even with the padding applied to the thead, it doesn't show up.
table {
width: 100%;
}
thead {
text-align: left;
background-color: yellow;
padding: 10px;
}