CODEWITHSUNDEEP
htmlcss
gadelat
gadelat

Reputation: 1470

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

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/

Upvotes: 6

Views: 5748

Answers (3)

Shrey Gupta
Shrey Gupta

Reputation: 5617

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. :)

Upvotes: 10

Markus Kottl&#228;nder
Markus Kottl&#228;nder

Reputation: 8268

Have you thought of just posiitioning the header fixed?

JSFiddle

body {
    padding-top: 20px;
}
div {
    background-color: red;
    height:20px;
    width: 100%;
    position: fixed;
    top: 0;
}
td {
    width: 100px;
    min-width:100px;
}

UPDATE If you want preserve vertical scrolling of the header use this jQuery snippet:

$(window).scroll(function(){
  $('div').css('top',-$(window).scrollTop());
});

JSFiddle

UPDATE

Here is another, even simpler aproach but i could imagine that the above is better for you, at least if you cannot edit the output of the tables.

JSFiddle

Upvotes: 4

user3076482
user3076482

Reputation:

Try this i think it should work http://jsfiddle.net/JXG5c/15/

 body {padding-top: 20px;}
div {background-color: red;height:20px;width: 100%;position: fixed;top: 0;}
td {width: 100px; min-width:100px;}

Upvotes: 0

Related Questions