CODEWITHSUNDEEP
htmlcss
wmash
wmash

Reputation: 4202

Table expands beyond body (html)

So what is happening is that my table has expanded over my body, even though it is contained within it, I think screenshots is the best way to show this of when I have over the elements when I'm inspecting them (Chrome):

Body

enter image description here

tableData (wrapper for table)

enter image description here

Table

enter image description here

This is my code:

<body>
  <main>
      <div class="tableData">
          <table>
              "..."
          </table>
      </div>
  </main>
</body>

I need my body to completely contain the table for styling purposes. How would be the best way to go about this? Is there a CSS overflow property I need to set?

Upvotes: 0

Views: 328

Answers (1)

Peter Herdenborg
Peter Herdenborg

Reputation: 5962

The browser probably decides it cannot possibly fit your table within its container and instead lets it overflow. If that is the case, you could set overflow-x: auto on .tableData to add horizontal scrollbars to the wrapper, technically making the table fit inside the body.

You can of course always investigate why the table is so wide. It may be because of cell padding, white-space: nowrap somewhere or other things that forces it to be unnecessarily wide.

Another possible cause, which would explain why scrollbars won't appear on the wrapper, would be if the table has position: absolute (or fixed), taking it out of the normal layout flow.

Upvotes: 1

Related Questions