Using window size to create an inner border

Question

I want to create an HTML table in which each cell is clickable, and clicking on the cell adds a border to a single div within the cell. I want the div border to exist entirely within the existing td limits that contains it, without resizing the table or its cells in general. I can't seem to do it right.

This previous question seems to refer to the same problem and points to some articles on CSS options with window size. I have a fiddle where I tried to implement this without success: 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> 

What is going on here. The border causes the content of td grow to accommodate the border of the div .

How to add a border to a div without affecting the containing table?

Answer 1

Take a look at JSFiddle .

You need to specify the width / height for your cells:

 td { // ... width:33.3%; height:33.3%; } 

Answer 2

How to use shadow insertion?

 .selected { box-shadow: inset 0px 0px 0px 2px red; } 

Answer 3

OK, as I saw some support for my answer in the comments, this is like an answer :)

Assign your cell by adding a yellow “hidden” border to the .unselected state:

CSS

 .unselected { background-color: yellow; border: 2px solid yellow; // Presize with this yellow border } div { .. line-height: 1; // Add line-height to regulate size (optional) } 

Codepen example.

Answer 4

Using table-layout to fix cell width and a little padding in selected to prevent height increase.

 table { table-layout: fixed; } .selected { padding: 1px; } 

See JSFiddle