12

I have a page with a DIV and a TABLE. The DIV is my header and I want it to be 100% width even when horizontal scroll-bar displayed. For some reason it takes only 100% of visible window.

My HTML code is:

<!DOCTYPE html>
<html lang="en">
<body>

    <div style="background-color:yellow;">100% DIV</div>

    <table style="width:100%; background-color:orange;">
        <thead>
            <tr>
                <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_1</th>
                <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_2</th>
                <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_3</th>
            </tr>
        </thead>
    </table>

</body>
</html>

When I scroll to the right the DIV does not use all the width:

How can I make the DIV to take 100% of the page width? Ideally I do not want to change the TABLE because it's a generated code.

3
  • Are you testing in IE or is that just your preferred browser? Nov 24, 2015 at 22:11
  • @HunterTurner - It happens in Chrome too
    – j08691
    Nov 24, 2015 at 22:12
  • Not working in IE, Chrome, FF, and in Apple Safari.
    – Vad
    Nov 24, 2015 at 22:24

2 Answers 2

13

There is no way (perfectly dynamically--without fixing any widths--and with pure CSS--no JavaScript) to get a block-level element to inherit the width of a sibling block-level element via a block-level parent element.

The workaround is to put display: inline-block on the parent element, since an inline-block calculates its width property from its widest child.

In your case, don't put display: inline-block on the body element. I would suggest wrapping your 100% div and table elements in another wrapper element, thus:

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="wrapper" style="display: inline-block; min-width: 100%;">
    <div style="background-color:yellow;">100% DIV</div>
    <table style="width:100%; background-color:orange;">
      <thead>
        <tr>
          <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_1</th>
          <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_2</th>
          <th style="padding-left:20px; padding-right:20px;">Very_Long_Header_3</th>
        </tr>
      </thead>
    </table>
  </div>
</body>
</html>

Also, putting min-width: 100% on the wrapper element will make it mimic an element with display: block on larger screen sizes.

0
1

Actually table tag is being overflowed, so try to give 100% to its parent and to the div as well. If it's not working please provide me a jsfiddle url

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.