skip to Main Content

In the following example you will see my attempt at making a flex box table responsive however i cant get the rows to be 100% of the available scroll space. Note the header background when scrolling.

.flex-table {
  border: 1px solid #ccc;
  overflow-x: scroll;
}
.flex-table .headers {
  position: sticky;
  z-index: 20;
  background: #ccc;
  top: -2rem;
}
.flex-table .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  width: 100%;
}
.flex-table .row .cell {
  flex-grow: 1;
  margin: 0.25rem;
  border-right: 1px solid #ccc;
  flex: none;
  width: 5rem;
}
.flex-table .row .cell:last-child {
  border-right: none;
}
<div class="flex-table">
  <div class="headers">
    <div class="row">
      <div class="cell">#</div>
      <div class="cell">--</div>
      <div class="cell">Item</div>
      <div class="cell">con</div>
      <div class="cell">qt</div>
      <div class="cell">cos</div>
      <div class="cell">pric</div>
      <div class="cell">GP (unit)</div>
      <div class="cell">Profit</div>
      <div class="cell">QOH</div>
      <div class="cell">ATS</div>
      <div class="cell">SO</div>
      <div class="cell">PO</div>
      <div class="cell">Sourcing Notes</div>
      <div class="cell">dev</div>
    </div>
  </div>
  <div class="bod">
    <div class="row">
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
    </div>
    <div class="row">
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
    </div>
    <div class="row">
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
    </div>
    <div class="row">
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
    </div>
  </div>
</div>

How can I make this layout responsive so the header bg appears as expected.

2

Answers


  1. Consider applying width: max-content to the .headers and .bod elements to ensure the width is as wide as its children:

    .flex-table {
      border: 1px solid #ccc;
      overflow-x: scroll;
    }
    .flex-table .headers {
      position: sticky;
      z-index: 20;
      background: #ccc;
      top: -2rem;
    }
    .flex-table :is(.headers,.bod) {
      width: max-content;
    }
    .flex-table .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      width: 100%;
    }
    .flex-table .row .cell {
      flex-grow: 1;
      margin: 0.25rem;
      border-right: 1px solid #ccc;
      flex: none;
      width: 5rem;
    }
    .flex-table .row .cell:last-child {
      border-right: none;
    }
    <div class="flex-table">
      <div class="headers">
        <div class="row">
          <div class="cell">#</div>
          <div class="cell">--</div>
          <div class="cell">Item</div>
          <div class="cell">con</div>
          <div class="cell">qt</div>
          <div class="cell">cos</div>
          <div class="cell">pric</div>
          <div class="cell">GP (unit)</div>
          <div class="cell">Profit</div>
          <div class="cell">QOH</div>
          <div class="cell">ATS</div>
          <div class="cell">SO</div>
          <div class="cell">PO</div>
          <div class="cell">Sourcing Notes</div>
          <div class="cell">dev</div>
        </div>
      </div>
      <div class="bod">
        <div class="row">
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
        </div>
        <div class="row">
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
        </div>
        <div class="row">
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
        </div>
        <div class="row">
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
        </div>
      </div>
    </div>
    Login or Signup to reply.
  2. The easiest thing to do in your case is to provide a .flex-table { display: grid; }.
    But I still advise you to use a table to display tabular data…

    .flex-table {
      display: grid; /* 👈 */
      border: 1px solid #ccc;
      overflow-x: scroll;
    }
    .flex-table .headers {
      position: sticky;
      z-index: 20;
      background: #ccc;
      top: -2rem;
    }
    .flex-table .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      width: 100%;
    }
    .flex-table .row .cell {
      flex-grow: 1;
      margin: 0.25rem;
      border-right: 1px solid #ccc;
      flex: none;
      width: 5rem;
    }
    .flex-table .row .cell:last-child {
      border-right: none;
    }
    <div class="flex-table">
      <div class="headers">
        <div class="row">
          <div class="cell">#</div>
          <div class="cell">--</div>
          <div class="cell">Item</div>
          <div class="cell">con</div>
          <div class="cell">qt</div>
          <div class="cell">cos</div>
          <div class="cell">pric</div>
          <div class="cell">GP (unit)</div>
          <div class="cell">Profit</div>
          <div class="cell">QOH</div>
          <div class="cell">ATS</div>
          <div class="cell">SO</div>
          <div class="cell">PO</div>
          <div class="cell">Sourcing Notes</div>
          <div class="cell">dev</div>
        </div>
      </div>
      <div class="bod">
        <div class="row">
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
        </div>
        <div class="row">
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
        </div>
        <div class="row">
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
        </div>
        <div class="row">
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
          <div class="cell">--</div>
        </div>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search