ansaurus

Question

How do I make my table body width equal to the table width in HTML?

Answer 1

A:

For both your table and the body:

Check your margins, should be 0. Check your padding, should be 0 too. Check your styling (Firebug) to make sure it is what you think it is. Post your HTML and CSS if that doesn't work.

geowa4 2009-07-23 17:44:30

Answer 2

A:

I will assume for the purpose of this answer that your HTML is like such:

<html>
    <head>
        <style type="text/css">
            table.onetable {
                width: 100%;
                background-color: #F00;
                margin: 0;
            }
        </style>
    </head>

    <body>
        <table class="onetable">
            <tr>
                <td>Hello World</td>
            </tr>
        </table>
    </body>
</html>

The reason why your table isn't filling the body is because your browser's default style imposes a padding to your body tag (usually 8px on most user-agents). Use the following CSS to override that style:

body { margin: 0; padding: 0; }

Andrew Moore 2009-07-23 17:48:17

Answer 3

+1 A:

You might also try setting the border-collapse style on your table to "collapse". This will minimize any padding on the table created by the browser defaults.

table {
     border-collapse: collapse;
}

skybondsor 2009-07-23 21:25:46

ansaurus

tags:

views:

answers:

How do I make my table body width equal to the table width in HTML?

related questions