Data table — striped rows, hover, sortable header

The table style every dashboard needs: striped rows, hover highlight, bold header, right-aligned numbers.

style.css v3.1

style.css — the CSS rules

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.data-table thead {
  background: #1a1a1a;
  color: white;
}

.data-table th {
  padding: 0.8rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #eee;
}

/* Zebra stripes */
.data-table tbody tr:nth-child(even) {
  background: #f9f9f9;
}

/* Hover highlight */
.data-table tbody tr:hover {
  background: rgba(160,192,0,0.08);
}

/* Right-align numeric columns */
.data-table td.num {
  text-align: right;
  font-family: monospace;
}

/* Status badge cell */
.data-table td .badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.badge.success { background: #3fb95022; color: #3fb950; }
.badge.fail    { background: #f8514922; color: #f85149; }

index.html — the HTML structure (what the CSS targets)

<table class="data-table">
  <thead>
    <tr>
      <th>Model</th>
      <th>Dataset</th>
      <th class="num">Accuracy</th>
      <th class="num">Latency</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>RandomForest</td><td>Iris</td><td class="num">0.942</td><td class="num">12ms</td>
      <td><span class="badge success">Trained</span></td>
    </tr>
    <tr>
      <td>XGBoost</td><td>Iris</td><td class="num">0.951</td><td class="num">8ms</td>
      <td><span class="badge success">Trained</span></td>
    </tr>
    <tr>
      <td>NeuralNet</td><td>Iris</td><td class="num">0.938</td><td class="num">45ms</td>
      <td><span class="badge fail">Failed</span></td>
    </tr>
    <tr>
      <td>LogReg</td><td>Iris</td><td class="num">0.893</td><td class="num">3ms</td>
      <td><span class="badge success">Trained</span></td>
    </tr>
  </tbody>
</table>

Live preview updates as you type

🧠 How it works

border-collapse: collapse — removes the double-border between cells. Always use this for tables. overflow: hidden + border-radius — clips the header's background to the rounded corners. thead has a dark background, tbody is white — classic dashboard look. nth-child(even) — zebra stripes. Improves readability on wide tables. tr:hover — highlights the row the mouse is over. Helps users track across wide rows. td.num { text-align: right; font-family: monospace } — right-aligned monospace numbers are easier to compare. Badges (success/fail) use semi-transparent background + solid text color — looks modern without being heavy.

✏️ Try these changes

Change nth-child(even) to nth-child(odd)
→ stripes flip — odd rows get the background
Change the thead background from #1a1a1a to #a0c000
→ header becomes green
Change the hover background from rgba(160,192,0,0.08) to rgba(88,166,255,0.1)
→ hover becomes blue
Add .data-table td:first-child { font-weight: 600; }
→ first column (model name) becomes bold
Change text-transform: uppercase to none
→ header text becomes normal case

← Previous lab

Form styling — inputs, labels, focus, validation

Next lab →

Alert boxes — success, error, warning, info