I've been working on formatting a small HTML table like the example below:
.table {
max-height: 160px;
display: block;
white-space: nowrap;
display: flex;
flex-direction: column;
overflow: auto;
border: 1px solid gray;
}
.table-body {
max-height: 100%;
}
.row {
width: 100%;
display: block;
}
.row.headers {
background: #ddd;
font-weight: 600;
position: sticky;
top: 0;
}
.row:nth-child(2n) {
background: #f1efef;
}
.cell {
text-overflow: ellipsis;
display: table-cell;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
padding: 2px 10px;
text-align: left;
display: inline-block;
vertical-align: top;
}
.cell:nth-child(1) {
width: 90px;
}
.cell:nth-child(2) {
width: 300px;
}
.cell:nth-child(3) {
width: 300px;
}
.cell:nth-child(4) {
width: 75px;
}
.cell:nth-child(5) {
width: 200px;
}
.cell:nth-child(6),
.cell:nth-child(7),
.cell:nth-child(8),
.cell:nth-child(9),
.cell:nth-child(10),
.cell:nth-child(11),
.cell:nth-child(12) {
width: 100px;
}
th {
position: sticky;
top: 0;
padding-top: 5px;
padding-bottom: 5px;
}<div class="table">
<div class="headers row">
<div class="cell">A</div>
<div class="cell">B</div>
<div class="cell">C</div>
<div class="cell">D</div>
<div class="cell">E</div>
<div class="cell">F</div>
<div class="cell">G</div>
<div class="cell">H</div>
<div class="cell">I</div>
<div class="cell">J</div>
<div class="cell">K</div>
<div class="cell">L</div>
<div class="cell">M</div>
</div>
<div class="table-body">
<div class="row">
//more code here
While my intention is for this table to have overflow in both the x and y directions, I've noticed that when scrolling horizontally, the alternating gray rows don't remain visible.
If you have any insights or suggestions on what could be causing this issue, I would greatly appreciate your input!