SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox: Div inside table is expanding beyond table contents

    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
    HTML Code:
    <!-- 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
    Code 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;
    }
    Follow Me On Twitter: BryceRay

  2. #2
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

    Code:
    <!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. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,597
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •