Copy-and-paste CSS table designs

A table you’ve just built in HTML looks flimsy, with no lines and no spacing. But just adding 3 lines of CSS makes it look like a proper price list. Here are 7 classic table designs, each with a live demo.

Start with these 3 lines

Tidy lines, spacing, and an underline—the three-piece set that makes the biggest difference to a plain table.

table {
  border-collapse: collapse;   /* keeps the lines from doubling up */
}
th, td {
  padding: 10px 24px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

border-collapse: collapse tells the browser to “merge the lines of neighboring cells into one,” and it’s the line you’ll write almost every time you style a table. Skipping vertical lines and using only horizontal ones is the modern staple for a clean look.

A color band on the header row

Filling the <th> row with color makes it clear at a glance which is the header.

th {
  background: #ff8a3d;
  color: #fff;
}

Zebra stripes

For a table with many rows, laying light color on every other row keeps the eye from wandering. You can leave the counting and the coloring to CSS.

tr:nth-child(even) {
  background: #fff7e6;
}

:nth-child(even) is a selector meaning “even-numbered rows.” Change even to odd and it switches to odd rows.

Rows light up on hover

When only the row you hover changes color, you won’t lose track of “which row am I looking at.”

td {
  transition: background 0.15s;   /* write it on the normal state */
}
tr:hover td {
  background: #fff3d6;
}

If you write transition on the tr:hover td side, the color snaps back instantly when you move the mouse away. To make both the arrival and the return soft, write it on the normal td.

A rounded card look

Rounding the whole table like a card gives a modern impression. The trick is to wrap it in an outer box with overflow: hidden.

.table-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

Even if you apply border-radius to the table itself, the cell background colors spill out from the four corners. Make rounding the job of the outer box and crop the overflow with overflow: hidden.

Right-align numbers

For columns of prices or scores, right-aligning them lines up the digits and makes them easier to compare. It’s subtle, but pro tables always do this little trick.

td.num {
  text-align: right;
}

In the HTML, just add a class to the cells in the number column, like <td class="num">¥800</td>.

On mobile, scroll horizontally

A table with many columns just won’t fit the width of a phone. The classic fix is to let it escape by scrolling sideways, rather than crushing and breaking it.

.scroll-box {
  overflow-x: auto;   /* scroll sideways when it overflows */
}
table {
  white-space: nowrap;   /* don't wrap awkwardly inside cells */
}

Just wrap the table in <div class="scroll-box">. The whole page stays intact, and only the table scrolls.

Summary

1. The first 3 lines are border-collapse + padding + underline—that alone gives the table a face.
2. If there are many rows, use zebra stripes (nth-child(even)) and hover, and a color band for the header.
3. For mobile support, put overflow-x: auto on the wrapping box—let it escape sideways without crushing it.

Timetables, price lists, rankings—pages with tables come up more often than you’d think. With these 7, you’ll be ready for just about any table you run into.