Using box-sizing to create an inside border

Question

I want to create an HTML table where each cell is clickable, and clicking on a cell adds a border to the single div within the cell. I want that div's border to exist entirely within the existing confines of the td that contains it, without resizing the table or its cells at all. I can't seem to make this happen correctly.

This previous question seems to address the same issue and points to some articles about the box-sizing CSS options. 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>

Here's what currently happens. The border causes the containing td to grow to accommodate the div's border.

I want the red border to appear without resizing the td

How can I add the border to the div without it affecting the containing table?

Could you simply add a border to the `.unselected` class (i.e. `.unselected { border: 2px solid yellow; }`. I'm not putting as answer since it doesn't really answer your question, just provides a hack solution. — kunalbhat, Aug 26 '13 at 22:33
Hmm, I'd be tempted to use jQuery to resize the cell in the click function, although this might also be considered a hack too... although @kunalbhat's answer would be a much more elegant solution, and is very easy: http://jsfiddle.net/YsAGh/4/ — ChrisW, Aug 26 '13 at 22:41
This won't fix the issue, but it's important that you put the unprefixed rule last e.g.`*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}`. This way, the browser will try to use the correct / finished unprefixed version first and then, if not implemented, fall back to the prefixed / under development version. — tw16, Aug 26 '13 at 22:47
@kunalbhat Why a table? Because this part of the project involves rendering several 24 x 16 grids, and a table seems perfect for that. It's not for some contrived layout, at least. — Chris Farmer, Aug 27 '13 at 04:07
I would handle it more like this - http://jsfiddle.net/devitate/YsAGh/10/. This way your grids are built already too just by changing the var rows. — Dylan, Aug 27 '13 at 07:20

score 1 · Answer 1 · answered Aug 26 '13 at 22:38

1

Look at my JSFiddle.

You need to provide a width/height to your cells:

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

answered Aug 26 '13 at 22:38

glautrou

3,140
2
29
34

score 1 · Answer 2 · answered Aug 26 '13 at 22:39

1

How about using an inset box-shadow?

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

answered Aug 26 '13 at 22:39

gvee

16,732
35
50

1

Be careful, this property in [not compatible with IE8](http://caniuse.com/css-boxshadow) (and Windows XP) – glautrou Aug 26 '13 at 22:44
Ie8 most certainly doesn't deserve compatability let alone anything fancy – iConnor Aug 26 '13 at 23:16
Fortunately this is an in-house app and we can assume IE9+ or most recent Firefox or Chrome. – Chris Farmer Aug 27 '13 at 04:08

score 1 · Answer 3 · answered Aug 26 '13 at 22:47

OK, since I've seen a some support for my response in the comments, here it as an answer :)

Presize 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.

Vahid Hallaji · Answer 4 · 2013-08-26T23:00:53.973

0

Using table-layout to fix the width of cells and small padding in selected to prevent increasing height.

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

See JSFiddle

edited Aug 26 '13 at 23:00

answered Aug 26 '13 at 22:54

Vahid Hallaji

7,159
5
42
51

Using box-sizing to create an inside border

4 Answers4