I have the following two simple tables, what I want to do is apply the border
only a pair of elements td
but that remain with the same style as when applied to the whole table as such, this is what I wear and can not recreate the style, what can I correct to achieve what I expect?
*{
font-family: Arial;
text-align: center;
font-size: 24px;
}
td{
width: 50px;
}
.border{
border: solid 1px black;
}
<table border="1" align="center" cellspacing="0" cellpadding="0">
<thead>
<tr >
<td colspan="2">foo</td>
<td >bar</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">foo</td>
<td>bar</td>
</tr>
<tr>
<td colspan="2">foo</td>
<td>bar</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
<td>foo</td>
</tr>
</tbody>
</table>
<br />
<table border="0" align="center" cellspacing="0" cellpadding="0">
<thead>
<tr class="">
<td class="border">foo</td>
<td class="border">bar</td>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</tbody>
</table>