# Fixing the table width problem in Firefox?



## Leiki

I really need to use a table but no matter what I set the width to, it just displays it as 100% in firefox, and in IE there are no problems. Here is the code that i'm using:

*

*



Is there any way to add something to that make it work in FF or should I use something different? Thanks for the help.


----------



## erick295

That's the correct way of doing it. There's probably something wrong elsewhere in your code.

Try validating it: http://validator.w3.org/


----------



## Shadow2531

Assuming you have a proper doctype, your code is valid and your doctype puts the browser in standards mode, then you have to ask yourself, "60% of what?".

e.g.


Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us">
    <head>
        <title>table width</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <style type="text/css">
            html {
                background: #fff;
                color: #000;
                font-size: 1em;
            }
            body {
                margin: 0;
                padding: 8px;
            }
            table#test, table#test2 {
                margin: auto; /* align center */
                text-align: center;
                border: 1px solid #f00;
                width: 60%;
            }
            table#test td, table#test2 td {
                border: 0;
                padding: 0;
            }
            div#cb {
                width: 600px;
                border: 1px solid #000;
                /* left and right auto to align center when you need to set top/bottom */
                margin-left: auto;
                margin-right: auto;
                margin-top: 15px;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <table id="test">
            <tr>
                <td>Width of this table is 60% of the current width of the viewport</td>
            </tr>
        </table>
        <div id="cb">
            <table id="test2">
                <tr>
                    <td>Width of this table is 60% of its 600px containing block</td>
                </tr>
            </table>
        </div>
    </body>
</html>

Keep in mind, that it's almost certain that Firefox is doing the proper thing in your situation and IE is the one having the problem displaying your code properly. Either way, if the desired look is the IE way, then you'll need to change your code. Make it look right in Firefox and then, if you have to, make it work in IE.


----------

