Data table

A wide data table, converted so it stays usable on mobile: below its own width the table gets a horizontal-scroll wrapper and the rows refuse to shrink — instead of cramming every cell to one word per line.

Live demo

On a narrow screen the table below scrolls sideways rather than collapsing. Try it on your phone, or narrow the window.

The output

The real rules the engine emits. The breakpoint and the row min-width both equal the detected table width, so the switch to scroll happens exactly when the table would otherwise overflow:

<div class="tbl">
  <div class="trow"><span>Author</span><span>Status</span><span>Action</span></div>
  <div class="trow"><span>John Michael</span><span>Online</span><span>Edit</span></div>
  <!-- … -->
</div>

.tbl{display:flex;flex-direction:column}
.trow{display:flex;gap:16px;padding:12px 16px;border-bottom:1px solid #eee}
.trow > span{flex:1 1 0;min-width:0}
@media (max-width:1088px){
  .tbl{overflow-x:auto;max-width:100%}
  .tbl .trow{min-width:1088px;flex-shrink:0}
}

Detection is careful: decorative groups that merely resemble a grid don't trigger this — it requires x-aligned columns and text-bearing rows. See the Features → more section for the live version.