Question 44911 in Html Question posted in
Some basic documentation can be found here.

Scrollable (left-right) table on small screens, rest of screen not scrollable – Html

My goal here is to have a table which displays normally on large screens, but when the screen is smaller than $minTableWidth, it should become scrollable, and the component which it is wrapped in should continue to get smaller and display mobile friendly, ie only the table should be scrollable.

Here’s what I have so far:

<div>
  <div>other parts of the page, etc...</div>
  <div className={styles.tableWrapperOuter}>
    <div className={styles.tableWrapperInner}>
      <Table className={styles.applicationTable}>
        {renderTableHeader()}
        <TableBody>{renderTableContent()}</TableBody>
      </Table>
    </div>
  </div>
</div>

.tableWrapperOuter {
  width: 100% //if screen is large, take up the full size

  @media screen and (max-width: $minTableWidth) { //if the screen is small, add scroll
    overflow-x: auto;
  }
}

.tableWrapperInner {
  min-width: 900px; //force the table to be normal size
}

.tableRowTemplate {
  grid-template-columns: minmax(100px, 1fr) minmax(80px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(80px, 1fr) 80px 10px;
}

I’ve experimented with various combinations but am absolutely stuck on this, so would appreciate any/all tips

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The solution for me was to use the 'vw' on the outer wrapper. Then I could set the width on the inner element to a pre-defined width on small screens in the inner wrapper

    .tableWrapperOuter {
  width: 100%;

  @media screen and (max-width: $laptopWidth) {
    overflow-x: auto;
    max-width: 90vw;
  }
}

.tableWrapperInner {
  @media screen and (max-width: $minMobileWidth) {
    overflow-x: auto;
    width: $maxTabletWidth;
  }
}


  2. 0

    Try this:

    table {
  display: block;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
}
    <table>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
</table>

<table>
  <tr>
    <td>My table</td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search