We can do this in two ways
- HTML
Nested tables helps us in this. Check the following snippet
<table border="0" cellspacing="0" cellpadding="4">
<tr> <td>Apple</td>
<td><table border="1" cellpadding="4">
<tr><td>Ball</td></tr></table></td>
<td>Cat</td> </tr>
</table>
The second <table> with border will solve the problem. The code looks as follows in a browser:
| Apple |
|
Cat |
- CSS
This is the better way of fixing the same issue:
<table border="0" cellspacing="0" cellpadding="4"><tr>
<td>Apple</td>
<td><div style= "border: solid 0 #060; border-width:2px; padding:0.5ex">Ball</div></td>
<td>Cat</td>
</tr></table>
The above snippet will show border only for the second cell and will look as follows in the browser:
| Apple |
Ball
|
Cat |
