html: why is my table not 100% of the width?

April 3, 2023

I am trying to show a table that stretches the entire width of the container (which is body)

I am trying this:

<body>
    <table class="table-fullWitdh">
        <tr>
            <td class="mainHeader table-fullWitdh">
                hi
            </td>
        </tr>
    </table>
</body>

<style type="text/css">

    body {
        width: 100vh;
        padding: 0;
        background: green;
    }

    .mainHeader{
        height: 150px;
        background-color:white;
    }

    .table-fullWitdh {
        width: 100%;
    }
</style>

But the result is not a 100 percent witdh in the table, this is the result:

You can clearly see that the table does not stretch over the whole screen. why is that?

>Solution :

The width: 100% style rule doesn’t mean 100% of the visible width of the page, it means 100% of the width of the containing element. In this case the containing element is the <body> element, which has a restricted width:

width: 100vh;

Remove that restriction and the <body> is by default 100% the width of the viewport, allowing the table to expand with it:

<body>
    <table class="table-fullWitdh">
        <tr>
            <td class="mainHeader table-fullWitdh">
                hi
            </td>
        </tr>
    </table>
</body>

<style type="text/css">

    body {
        padding: 0;
        background: green;
    }

    .mainHeader{
        height: 150px;
        background-color:white;
    }

    .table-fullWitdh {
        width: 100%;
    }
</style>