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
Consider applying
width: max-content
to the.headers
and.bod
elements to ensure the width is as wide as its children: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…