Use a table for data with row and column relationships. A scrolling wrapper can preserve those relationships when the data is wider than the viewport.

Version and setup

These examples are compiled with Tailwind CSS 3.3.2. Copy document includes the required CSS, so that document runs without a Tailwind installation. To use the utility classes in a project, follow the versioned setup guide.

This site customizes its spacing scale: p-10 is 10px here, while standard Tailwind 3 uses 2.5rem. The examples below use unaffected spacing keys or explicit arbitrary values. Check your project configuration before assuming a utility’s size. Tailwind 4 has a different setup; use its official installation guide for a new version-4 project.

Scroll the table without scrolling the article

Read a labeled, scrollable tableLink

Tailwind CSS 3.3.2; the CSS tab includes the compiled styles.

HTML

<div
  class="overflow-x-auto"
  tabindex="0"
  role="region"
  aria-label="Workshop schedule"
>
  <table class="min-w-[34rem] w-full border-collapse">
    <caption class="p-4 text-left font-bold">
      Workshop schedule — sample data
    </caption>
    <thead>
      <tr>
        <th scope="col" class="p-4 border text-left">Session</th>
        <th scope="col" class="p-4 border text-left">Time</th>
        <th scope="col" class="p-4 border text-left">Location</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" class="p-4 border text-left">HTML foundations</th>
        <td class="p-4 border">09:00</td>
        <td class="p-4 border">Room A</td>
      </tr>
      <tr>
        <th scope="row" class="p-4 border text-left">CSS layout</th>
        <td class="p-4 border">10:30</td>
        <td class="p-4 border">Room B</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

*,
::before,
::after {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  background: none;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
img,
video {
  height: auto;
}
a {
  color: inherit;
  text-decoration: inherit;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.table {
  display: table;
}
.w-full {
  width: 100%;
}
.min-w-\[34rem\] {
  min-width: 34rem;
}
.border-collapse {
  border-collapse: collapse;
}
.overflow-x-auto {
  overflow-x: auto;
}
.border {
  border-width: 1px;
}
.p-4 {
  padding: 1rem;
}
.text-left {
  text-align: left;
}
.font-bold {
  font-weight: 700;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

On a narrow viewport, focus the wrapper and try the arrow keys. Only the region should scroll horizontally. The caption names the data, and scope connects the simple row and column headers to their cells.

Choose wrapping deliberately

Do not apply whitespace-nowrap to every cell merely to make it look tidy: long descriptions then force much wider tables. Allow prose to wrap and reserve no-wrap behavior for short values where it helps.

A scroll wrapper does not solve every small-screen table. Consider fewer columns, a separate detail view, or a different presentation when that preserves the data’s meaning. Keep header relationships if changing the layout. The native table lesson explains the structure before styling.

Sources

Reference 1 Reference 2 Reference 3 provide the technical details and current compatibility information.