Skip to content
Laviyx Learn

Try

CSS course menu

Styling HTML Tables with CSS: Borders, Zebra Stripes and Responsive Tables

Style tables with CSS: border-collapse, cell padding, header styles, zebra striping with nth-child, hover highlighting, aligning numbers, caption-side, sticky headers, and making wide tables scroll on small screens.

Beginner7 min readUpdated
On this page

HTML tables look plain by default: no borders and tight cells. A few CSS rules turn them into clean, readable data tables.

The starting point#

CSS
table {
  border-collapse: collapse;
  width: 100%;
  font-family: system-ui, sans-serif;
  font-size: 15px;
}
th, td {
  padding: 8px 12px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}
thead th {
  background: #1d3b4f;
  color: white;
}
HTML
<table>
  <thead>
    <tr><th>Language</th><th>Job</th><th>Example</th></tr>
  </thead>
  <tbody>
    <tr><td>HTML</td><td>Structure</td><td>Headings, links, forms</td></tr>
    <tr><td>CSS</td><td>Presentation</td><td>Colours, layout, animation</td></tr>
    <tr><td>JavaScript</td><td>Behaviour</td><td>Clicks, data, updates</td></tr>
  </tbody>
</table>
Result
  • border-collapse: collapse merges neighbouring cell borders into single lines. Without it, every cell has its own border with a gap between them.
  • Padding on th and td gives cells room.
  • A border only on the bottom of each cell makes clean horizontal rules.

Zebra stripes and hover#

CSS
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 12px; text-align: left; }
thead th { border-bottom: 2px solid #333; }
tbody tr:nth-child(even) { background: #f3f5f8; }
tbody tr:hover { background: #fff6d6; }
HTML
<table>
  <thead><tr><th>Name</th><th>City</th></tr></thead>
  <tbody>
    <tr><td>Asha</td><td>Hyderabad</td></tr>
    <tr><td>Ravi</td><td>Pune</td></tr>
    <tr><td>Meera</td><td>Chennai</td></tr>
    <tr><td>Kiran</td><td>Delhi</td></tr>
  </tbody>
</table>
Result

Stripes help the eye follow long rows across the table.

Aligning numbers#

Right-align numeric columns so digits line up, and use tabular figures so every digit has the same width:

CSS
table { border-collapse: collapse; }
th, td { padding: 6px 12px; border-bottom: 1px solid #ddd; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
caption { caption-side: bottom; font-size: 13px; color: #666; padding-top: 6px; }
HTML
<table>
  <caption>Amounts in rupees</caption>
  <tr><th>Item</th><th class="num">Price</th></tr>
  <tr><td>Notebook</td><td class="num">45.00</td></tr>
  <tr><td>Backpack</td><td class="num">1,299.00</td></tr>
  <tr><td>Pen</td><td class="num">10.50</td></tr>
</table>
Result

caption-side: bottom moves the caption below the table.

Sticky headers#

For long tables, keep the header visible while scrolling:

CSS
.scroll { max-height: 160px; overflow-y: auto; border: 1px solid #ddd; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 6px 10px; text-align: left; }
thead th { position: sticky; top: 0; background: #1d3b4f; color: white; }
HTML
<div class="scroll">
  <table>
    <thead><tr><th>Day</th><th>Steps</th></tr></thead>
    <tbody>
      <tr><td>1</td><td>5,200</td></tr><tr><td>2</td><td>7,100</td></tr>
      <tr><td>3</td><td>6,450</td></tr><tr><td>4</td><td>8,020</td></tr>
      <tr><td>5</td><td>4,980</td></tr><tr><td>6</td><td>9,300</td></tr>
      <tr><td>7</td><td>6,700</td></tr><tr><td>8</td><td>7,750</td></tr>
    </tbody>
  </table>
</div>
Result

Scroll inside the box: the header row stays at the top. position: sticky is explained in Position.

Wide tables on small screens#

A table with many columns can be wider than a phone. Wrap it in a container that scrolls horizontally:

CSS
.table-wrap {
  overflow-x: auto;
}
HTML
<div class="table-wrap" role="region" aria-label="Exam timetable" tabindex="0">
  <table>...</table>
</div>

The tabindex="0" and label let keyboard users focus the region and scroll it with arrow keys.

Practice#

Practice exercise

Style a 3-column price table so the header has a light grey background and bold text, rows have bottom borders, the price column is right-aligned with tabular numbers, and rows highlight on hover.

Show solution
CSS
table { border-collapse: collapse; min-width: 320px; }
th, td { padding: 8px 12px; border-bottom: 1px solid #e3e3e3; text-align: left; }
thead th { background: #f1f3f5; font-weight: 700; }
td:last-child, th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #f8f9fa; }
HTML
<table>
  <thead><tr><th>Plan</th><th>Users</th><th>Price (₹/month)</th></tr></thead>
  <tbody>
    <tr><td>Starter</td><td>1</td><td>0</td></tr>
    <tr><td>Team</td><td>10</td><td>999</td></tr>
    <tr><td>Business</td><td>50</td><td>3,999</td></tr>
  </tbody>
</table>
Result

Key takeaway#

Finished this lesson?

Related lessons

HTMLHTML Tables: table, tr, th and td with ExamplesLearn how to build HTML tables with table, tr, th and td, add header cells, understand how tables are read row by row, add borders with CSS, and know when tables should and should not be used.Beginner5 min readHTMLAdvanced HTML Tables: caption, thead, tbody, tfoot, colspan, rowspan and scopeBuild accessible, well-structured HTML tables: add a caption, group rows with thead, tbody and tfoot, merge cells with colspan and rowspan, set the scope of header cells, and style columns with colgroup.Beginner7 min readCSSCSS Pseudo-classes: :hover, :focus, :nth-child, :not and MoreLearn CSS pseudo-classes with live examples: user action states (:hover, :focus, :focus-visible, :active), link states, form states (:checked, :disabled, :invalid, :user-invalid), structural pseudo-classes (:first-child, :nth-child, :nth-of-type) and :not().Beginner6 min readCSSCSS overflow: hidden, scroll, auto and Text Overflow with EllipsisLearn what happens when content is bigger than its box and how to control it with CSS overflow: visible, hidden, scroll, auto and clip, overflow-x and overflow-y, scrollable areas, truncating text with an ellipsis, and line clamping.Beginner6 min read