CSS table / table-cell and padding?

Question

I was wondering why using padding on a "display: table;" was not working as I expect it should ;-).

.table {
    display: table;
    width: 100%;
    background: firebrick;
    color: white;
    padding: 10px;
}
.table-cell {
    display: table-cell;
    background: seagreen;
}

<div class="table">
  <div class="table-cell">
    Why is the padding working like shit?
  </div>
</div>

Here is the jsfiddle: http://jsfiddle.net/7n38t/

As you can see the "padding: 10px;" on ".table" is resulting in a table that is bigger than the frame... and the horizontal scrollbar appears.

Why is it reacting like this?? I don't want a workaround for this, because I have one, but I really want to understand why!

Thanks, Bastien

Because the box model is different between browsers. Firefox, Chrome, Safari, Opera will not include padding as part of the calculation of width. IE will though. + why are you using divs for a table? — David Nguyen
– David Nguyen, Commented Nov 20, 2013 at 16:11
@David Nguyen: It was 15 years ago. It isn't today unless you're still relying on IE5 quirks mode. — BoltClock
– BoltClock, Commented Nov 20, 2013 at 16:21

agconti · Accepted Answer · 2013-11-20 16:23:15Z

1

Setting box-sizing to border box will fix your issue:

check it out in a fiddle: http://jsfiddle.net/7n38t/3/

.table {
    display: table;
    width: 100%;
    background: firebrick;
    color: white;
    padding: 10px;
    box-sizing: border-box; /* this guy!! */
}
.table-cell {
    display: table-cell;
    background: seagreen;
}

edited Nov 20, 2013 at 16:23

answered Nov 20, 2013 at 16:16

agconti

18.2k17 gold badges85 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

powercoder23 · Accepted Answer · 2013-11-20 16:15:35Z

0

When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins.

Ref:http://www.w3schools.com/css/css_boxmodel.asp

answered Nov 20, 2013 at 16:15

powercoder23

1,4041 gold badge13 silver badges23 bronze badges

Comments

kursus · Accepted Answer · 2013-11-20 16:18:38Z

0

You can use border-spacing instead of padding on your table element (the box model behaves differently for tables).

border-spacing:10px;

answered Nov 20, 2013 at 16:18

kursus

1,3943 gold badges20 silver badges35 bronze badges

Collectives™ on Stack Overflow

CSS table / table-cell and padding?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related