CSS table generator

.table-wrap {
  overflow-x: auto;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  color: #1f2937;
  background: #ffffff;
}
.table th,
.table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}
.table thead th {
  background: #f3f4f6;
  color: #111827;
  font-weight: 600;
}
.table tbody tr:nth-child(even) {
  background: #f9fafb;
}
@media (hover: hover) {
  .table tbody tr:hover {
    background: #eef2ff;
  }
}

<div class="table-wrap">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Plan</th>
        <th scope="col">Price</th>
        <th scope="col">Storage</th>
        <th scope="col">Users</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Free</td>
        <td>$0</td>
        <td>5 GB</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Pro</td>
        <td>$12</td>
        <td>100 GB</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Team</td>
        <td>$49</td>
        <td>1 TB</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Enterprise</td>
        <td>Custom</td>
        <td>Unlimited</td>
        <td>Unlimited</td>
      </tr>
    </tbody>
  </table>
</div>

What the CSS does

• border-collapse: collapse merges the borders of neighbouring cells into one line, so a 1px grid really is 1px everywhere instead of 2px between cells.
• Stripes and hover colour the row, not the cells. The body colour sits on the table and every cell is transparent, so the row's colour shows through. The hover rule comes after the stripe rule with the same specificity, so a hovered striped row still lights up.
• Hover only where there is a mouse. The hover rule sits inside @media (hover: hover), so on a phone a tapped row doesn't stay highlighted.
• The wrapper keeps phones usable. A wide table scrolls sideways inside its -wrap box (overflow-x: auto) instead of making the whole page scroll.
• The header row goes in <thead> with <th scope="col"> cells, so screen readers announce each column's name, and the stripes count body rows only.
• Every cell is escaped: text like <b> or & in your data shows up as typed, it never turns into HTML.

How we test it

For 159 different tables — random data with quotes, commas, line breaks and HTML-like text, every border style, padding, colour and preset — the CSS and HTML are pasted into Chrome exactly as you would copy them, and every cell is measured: padding, font size and weight, alignment, text colour, the background that shows through, and all four borders, for normal rows, striped rows and a hovered row (4,410 cells). Each must equal what the settings say. The Tailwind markup, compiled with Tailwind CSS 4.3.3, must give the same 4,410 cells. The data reader is checked by writing 298 random tables out as CSV and tab-separated text and reading them back.

Questions

How do I paste from Excel or Google Sheets?

Select the cells, copy, and paste into the data box. Spreadsheets copy cells separated by tabs, and the tool reads a tab-separated first line as a spreadsheet paste. Otherwise it reads CSV — commas, or semicolons when the first line has more of them (European spreadsheets export that way). Quoted fields can hold commas, quotes ("") and line breaks. Up to 200 rows and 20 columns are used.

How do I make a table responsive?

Wrap it in a box with overflow-x: auto — the code here always does. The table keeps its columns and scrolls sideways on a narrow screen while the rest of the page stays put.

Why can't I round the table's corners?

border-radius has no effect on a table with collapsed borders. Rounded tables need border-collapse: separate with border-spacing: 0 and the radius on the corner cells — round any other box with the border radius generator.

What does the Tailwind version give me?

The same table as Tailwind CSS v4 markup: classes on each element, with even: for the stripes and hover: for the highlight. Padding uses the spacing scale (px-3.5 = 14px at the default 16px root size); font size and colours are arbitrary values such as text-[15px] and bg-[#f3f4f6].

Lay out the page around it with the CSS grid generator, or turn existing CSS into classes with the CSS to Tailwind converter.

Further reading

The code here makes a wide table scroll sideways. For the other ways to fit one on a phone — hiding low-priority columns, or plugins such as wpDataTables and FooTable — see Building Responsive Tables by Sonal S Sinha at SKT Themes.