Question 416482 in CSS Question posted in
Some basic documentation can be found here.

Css – Table expanding outside of div and viewport

You can see the live table page here on which a large table expands horizontally over the parent div and viewport, and a small table on this page that’s well within parent div and viewport.

How can I get the large table to fit in the viewport nicely without the page horizontal scrollbar appearing but the table scrollable on its own?

I tried adding overflow: auto and display: table to parent div, which didn’t work, and this:

table {
  width: 100%;
  table-layout: fixed;
}

Which did shrink the table to fit in the viewport but it made all the table columns too crowded, imploding cell content unreadable:

enter image description here

Also tried:

table {
  word-break: break-word;
}

Which isn’t desirable at all since words are aligned vertically.

The tables are dynamic as columns are different per data table on our website, so we are unable to set a specific width per column.

Is there no other way to fix this so the table is scrollable on its own and fits nicely within the viewport without the page showing bottom scrollbar?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the culprit following the advice of @Kosh by creating a minimal example myself.

    The template came with a few wrapper classes such as .wrapper and .wrapper-table-row that has either display:table or display:table-row.

    I removed those exact rules and overflow:auto on parent div is now working and the table is now fitting inside viewport.

    I'm not sure but would it break the template and other layouts of the site if I remove them? What do these rules do?

    .wrapper {
  display:table;
  height:100%;
  width:100%;
}
.wrapper-table-row {
  display:table-row;
  height:100%;
}

    Fitting the element to be 100% in height?


  2. 0

    Move your overflow: auto style from .scroller-main to .scroller-main-inner.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search