100% width = viewport width. How to make it as wide as is page body instead?

Question

I have site which needs to display wide table. Above it is header which should be as wide as whole page (in this case, as wide as is table). However, it's only as wide as wide is viewport (screen size), so it looks alright when displayed, but as soon as user scrolls to sides he sees that header is not as wide as it should. How can I stretch this header to full page width without hardcoding values?

Simple example:

HTML:

<div></div>
<table>
    <tr>
      <td>V</td>
      <td>e</td>
      <td>r</td>
      <td>y</td>
      <td></td>
      <td>w</td>
      <td>i</td>
      <td>d</td>
      <td>e</td>
      <td></td>
      <td>t</td>
      <td>a</td>
      <td>b</td>
      <td>l</td>
      <td>e</td>
   </tr>
</table>

CSS:

div {background-color: red;height:20px;width:100%;}
td {width: 100px;min-width:100px;}

Jsfiddle: http://jsfiddle.net/JXG5c/3/

Answer 1

The fix is actually quite simple; wrap the table and the header in a inline-block div. This way, the wrapping div takes as much space as necessary, not just the space of the viewport. Then, you can use the 100% width for the child div, which is your header. So, your new markup should look something like this:

<div id="parent">
    <div id="child"></div>
    <table>
        <tr><td>V</td><td>e</td><td>r</td><td>y</td><td></td><td>l</td><td>o</td> <td>n</td <td>g</td><td></td><td>t</td><td>a</td><td>b</td><td>l</td><td>e</td></tr>
    </table>
</div>

And your new CSS should look like this:

td {width: 100px;min-width:100px;}
#parent {display:inline-block;}
#child {background-color: red;height:20px;width:100%;}

So really all that needs to be done is that the parent must wrap the header and the table, and you need to set it to inline-block, and Voila, you have a full sized header. Also, note that the header will not be "fixed", it will scroll with the page, which if I interpreted your question correctly, is what you want to happen.

Here's a fiddle for you: http://jsfiddle.net/JXG5c/24/

UPDATE: Why does this work with inline-block but not block?

Block automatically takes up all the space of the parent. The parent for your header is the viewport/body, which is automatically 100% of the screen size.

Using inline-block, however, causes the div to take as much space as necessary. Think of it like a <span> element; it takes up as much space as necessary, no more, no less. However, divs don't work well with inline, so the people at the W3C made inline-block, which confers inline behavior to any block element. By using inline-block, the parent div automatically fits to the size of the children, which are your table and header. Thus, the parent of the header is the same size as the table, and by setting the header to 100% the width of the parent, the issue is solved. :)