Firefox: Div inside table is expanding beyond table contents

HTML & CSS
1

Hello,

I’m having some difficulty understanding why this is not working. I’ve uploaded an example to jsfiddle here: http://jsfiddle.net/SLuht/1/

It works as expected in chrome, but if you open that jsfiddle example up in firefox you will see the issue. I want the div to fit fully inside the table without hiding the overflow and without scrollbars, in other words the table should expand to the full height of its contents.

For those of you who don’t want to go to jsfiddle
HTML

<!-- Use divs inside of tds/ths in order to have finer control over the borders -->
<table>
    <thead>
        <tr>
            <th>
                <div style="border-left:3px solid #000; border-top:3px solid #000;">
                    <h3>Header 1</h3>
                </div>
            </th>
			<th>
                <div style="border-left:4px solid #000; border-top:3px solid #000;">
                    <h3>Header 2</h3>
                </div>
            </th>
            <th>
                <div style="border-left:4px solid #000;">
                    <h3>Header 3</h3>
                </div>
            </th>
			<th>
                <div style="border-left: 1px solid #000">
                    <h3>Header 4</h3>
                </div>
             </th>
        </tr>
    </thead>
    <tbody>
		<tr>
		    <td>
                <div style="border-left:3px solid #000;">
                    <p>Some description paragraph text would go here.</p>
                </div>
           </td>
			<td>
                <div style="border-left:4px solid #000;">
                    <p>Some description paragraph text would go here.</p>
                </div>
            </td>
			<td>
                <div style="border-left:4px solid #000;">
                    <p>Some description paragraph text would go here.</p>
                </div>
            </td>
			<td >
                <div style="border-left: 1px solid #000">
                    <p>Some description paragraph text would go here.  A little longer.</p>
                </div>
            </td>
		</tr>
		<tr>
		    <td>
                <div style="border-left:3px solid #000; border-bottom:3px solid #000;">
                    <p>some more text</p>
                </div>
           </td>
			<td>
                <div style="border-left:4px solid #000; border-bottom:3px solid #000;">
                    <p>some more text</p>
                </div>
            </td>
			<td>
                <div style="border-left:4px solid #000;">
                    <p>some more text</p>
                </div>
            </td>
			<td>
                <div style="border-left: 1px solid #000">
                    <p>some more text</p>
                </div>
            </td>
		</tr>
	</tbody>
</table>

CSS

/** table layout fixed in order to force equal column widths of 25% */
table{
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #000;
    text-align: left;
    height: 100%;
}

table tr{
    height: 100%;
}

table tr td, table tr th{
    padding:0;
    height: 100%;
    width: 25%;
}

table tr div{
    height: 100%;
    padding: 4px;
}

table tr p, table tr h3{
    padding: 0; 
    margin: 0;
}
2

Bar338,

Remove the padding in,

table tr div {
height: 100%;
padding: 4px;
}

Use line height if you are trying to achieve some spacing.

Hope that helps,

Shawn

3

bar338,

I’m using FF20.

Padding is perfectly acceptable inside a table-cell, including when applied to a div within a cell.

One cannot assign a height to a table-row, nor should one assign a height of 100% to the inner div because the basis for the 100% height plus the vertical padding that has been applied to the divs will overflow the table-cells.

The only time I see content overflowing the right edge of the table is when the window is narrower than the widest word, and that is to be expected; so I assume you were referring to vertical overflow.

For demo purposes, I changed the border-collapse property as noted and added background-colors.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?1037188-Firefox-Div-inside-table-is-expanding-beyond-table-contents
Thread: Firefox: Div inside table is expanding beyond table contents
2013.04.18 12:36
bar338
-->
<head>
    <title>template</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

/** table layout fixed in order to force equal column widths of 25% */
table {
    table-layout: fixed;
    width: 100%;
    border: 1px solid #000;
    text-align: left;
/*    height: 100%;    /* changed for demo.  unnecessary. */
    border-collapse: separate;    /* changed for demo */
    background-color:#f00;    /* added for demo */
    border-spacing:1px;    /* added for demo */
}

table tr {
/*    height: 100%;    /* changed for demo.  invalid application of height. */
}


table tr td,
table tr th {
    padding:0;
    height: 100%;
/*    width: 25%;    /* changed for demo.  unnecessary. */
    background-color:#eee;    /* added for demo */
}

table tr div {
/*    height: 100%;    /* changed for demo.  inappropriate.  height plus vertical padding overflows table-cell vertically. */
    padding: 4px;
}

table tr p,
table tr h3 {
    padding: 0;
    margin: 0;
}

    </style>
</head>
<body>

<!-- Use divs inside of tds/ths in order to have finer control over the borders -->
<table>
    <thead>
        <tr>
            <th>
                <div style="border-left:3px solid #000; border-top:3px solid #000;">
                    <h3>Header 1</h3>
                </div>
            </th>
            <th>
                <div style="border-left:4px solid #000; border-top:3px solid #000;">
                    <h3>Header 2</h3>
                </div>
            </th>
            <th>
                <div style="border-left:4px solid #000;">
                    <h3>Header 3</h3>
                </div>
            </th>
            <th>
                <div style="border-left: 1px solid #000">
                    <h3>Header 4</h3>
                </div>
             </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div style="border-left:3px solid #000;">
                    <p>Some description paragraph text would go here.</p>
                </div>
           </td>
            <td>
                <div style="border-left:4px solid #000;">
                    <p>Some description paragraph text would go here.</p>
                </div>
            </td>
            <td>
                <div style="border-left:4px solid #000;">
                    <p>Some description paragraph text would go here.</p>
                </div>
            </td>
            <td >
                <div style="border-left: 1px solid #000">
                    <p>Some description paragraph text would go here.  A little longer.</p>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div style="border-left:3px solid #000; border-bottom:3px solid #000;">
                    <p>some more text</p>
                </div>
           </td>
            <td>
                <div style="border-left:4px solid #000; border-bottom:3px solid #000;">
                    <p>some more text</p>
                </div>
            </td>
            <td>
                <div style="border-left:4px solid #000;">
                    <p>some more text</p>
                </div>
            </td>
            <td>
                <div style="border-left: 1px solid #000">
                    <p>some more text</p>
                </div>
            </td>
        </tr>
    </tbody>
</table>

</body>
</html>
4

You ought to get rid of the divs - you can get as fine a control of the borders of the table as you need by styling the table properly.