Looking to create an HTML table with clickable cells, each containing a div that adds a border upon clicking. The challenge is ensuring the border stays within the boundaries of the td without altering the size of the table or its cells. Struggling to achieve this correctly.
Found a similar query on Stack Overflow mentioning the box-sizing CSS properties as a potential solution. Attempted to implement it in a fiddle, but unsuccessful: http://jsfiddle.net/YsAGh/3/.
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
<table>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
....
</table>
The current issue arises when adding the border, causing the td container to resize according to the div's border.
Seeking advice on how to add the border to the div without affecting the overall table layout.