CSS: Overflowing HTML table

Question

I'm working on a little table in HTML such as the following:

 .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"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> <div class="row"> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> <div class="cell">womp</div> </div> </div> </div>

My goal is for this table to overflow in the x and y directions. However, if you scroll right, you'll see that the gray bars illuminating every other row aren't visible.

Does anyone know what I'm missing? Any pointers would be greatly appreciated!

Answer 1

add display: table; to .row class

display:block; vs display:table;

you can follow the question CSS: display:block; vs display:table;

may be it will help you