Components

Table

A flat data table: uppercase headers over a 1px rule, hairline row separators, and tabular numerals. Use .ds-table__num to right-align figures, .ds-table__name for the row label, and add --hover for a row highlight.

Data table

A .ds-table__row-action sits in a trailing cell for per-row controls.

Table · hover
GradeOverheadDays
Consultant18 %218
Senior16 %216
Manager14 %214
 
<table class="ds-table ds-table--hover">
  <thead>
    <tr><th>Grade</th><th class="ds-table__num">Overhead</th><th class="ds-table__num">Days</th><th></th></tr>
  </thead>
  <tbody>
    <tr><td class="ds-table__name">Consultant</td><td class="ds-table__num">18 %</td><td class="ds-table__num">218</td><td><button class="ds-table__row-action" aria-label="Delete">✕</button></td></tr>
    <tr><td class="ds-table__name">Senior</td><td class="ds-table__num">16 %</td><td class="ds-table__num">216</td><td><button class="ds-table__row-action" aria-label="Delete">✕</button></td></tr>
    <tr><td class="ds-table__name">Manager</td><td class="ds-table__num">14 %</td><td class="ds-table__num">214</td><td><button class="ds-table__row-action" aria-label="Delete">✕</button></td></tr>
  </tbody>
</table>