Question 43149 in Html Question posted in
Some basic documentation can be found here.

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

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

I am trying this:

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

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

.table-fullWitdh {
    width: 100%;
}
<table class="table-fullWitdh">
    <tr>
        <td class="mainHeader table-fullWitdh">
            hi
        </td>
    </tr>
</table>

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

enter image description here

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    You just need to replace vh(viewport-height) with vw(viewport-width)

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

<style type="text/css">

    body {
        width: 100vw; // vh(viewport-height) -> vw(viewport-width)
        padding: 0;
        background: green;
    }

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

    .table-fullWitdh {
        width: 100%;
    }
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search