CSS property Box-Sizing has no effect on the Box Model

Question

There was this question posted and it got me thinking.

table cell fixed height and border issue in firefox

So I did as follows.

HTML:

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Template</title>
            <link rel="stylesheet" href="styles.css" />
        </head>
        <body>

            <table id="first" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td>Cell 1</td>
                        <td>Cell 2</td>
                        <td>Cell 3</td>
                        <td>Cell 4</td>
                        <td>Cell 5</td>
                    </tr>
                </tbody>
            </table>

            <table id="second" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td>Cell 1</td>
                        <td>Cell 2</td>
                        <td>Cell 3</td>
                        <td>Cell 4</td>
                        <td>Cell 5</td>
                    </tr>
                </tbody>
            </table>

            <table id="third" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td>Cell 1</td>
                        <td>Cell 2</td>
                        <td>Cell 3</td>
                        <td>Cell 4</td>
                        <td>Cell 5</td>
                    </tr>
                </tbody>
            </table>

        </body>
    </html>

With the following CSS:

* {
    padding: 0;
    margin: 0;
    font: 15px arial, sans-serif;
    line-height: 1;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    float: left;
    margin-left: 5px;
}
table#first tbody tr td { 
    height: 35px; 
    border-bottom: 5px solid #000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
} 
table#second tbody tr td { 
    height: 35px; 
    border-bottom: 5px solid #000;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
} 
table#third tbody tr td { 
    height: 35px; 
    border-bottom: 5px solid #000;
    box-sizing: padding-box;
    -moz-box-sizing: padding-box;
}

The problem is that regardless of the box-sizing property with values of border-box(click for pic), content-box(click for pic) and padding-box(click for pic), in Firefox 6.0.2, under Firebug 1.8.2, the layout tab as well as the computed height shows the height of all <td> to be 32px with a 3px border.

Either something is wrong, or I am missing something simple or my concept of the box-model is wrong?

Can also somebody please create the tags for "box-sizing" and "padding-box"

"Can also somebody please create the tags for 'box-sizing' and 'padding-box'" I don't see the point of doing this. You only get to use 5 tags per question, and those tags look like fillers more than tags with any real categorical meaning. — BoltClock, Sep 26 '11 at 12:05
@BoltClock - It was done before. The "colgroup" tag did not exist - http://stackoverflow.com/questions/6318185/span-attribute-on-colgroup-and-col - I don't mind but i just thought it would be easier for future users wo will search using box-sizing or padding-box — Jawad, Sep 26 '11 at 12:08

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

This is a known issue with Firefox's implementation of box-sizing. The MDN page for box-sizing says:

Notes

See bug 243412 and its dependents:

-moz-box-sizing doesn't apply to table cells

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 26 '11 at 12:09

BoltClock

700,868
160
1,392
1,356

what if I set all td to display: inline-block; ? – Jawad Sep 26 '11 at 12:17
1

Apparently, every browser has issues with it. Tested in Safari 5.1, Chrome 14, IE9 and Opera 11: http://jsfiddle.net/BoltClock/6Jr4H/1 – BoltClock Sep 26 '11 at 12:18
1

Ok with display: inline-block; the border-box is 30px+5px, the content-box is 35px+5px and padding-box is 35px+5px. Seems this is a workaround. Too noobish to qualify for a CSS hack. – Jawad Sep 26 '11 at 12:25

CSS property Box-Sizing has no effect on the Box Model

1 Answers1

Notes

Linked