ComponentsShipped

Table

Mono headers, hairline rows, no zebra and no boxes. The comparison variant marks your own row with an ink rule.

Project	Role	Result
ViewRyt	Landing page, ads	3.2X
IRBS	Booking flow	-40%
Dentomate	Product, brand	₹399

Show code

<div class="table-scroll">
  <table class="table">
    <thead><tr><th>Project</th><th>Role</th><th class="num">Result</th></tr></thead>
    <tbody>
      <tr><td>ViewRyt</td><td>Landing page, ads</td><td class="num mono">3.2X</td></tr>
      <tr><td>IRBS</td><td>Booking flow</td><td class="num mono">-40%</td></tr>
      <tr><td>Dentomate</td><td>Product, brand</td><td class="num mono">₹399</td></tr>
    </tbody>
  </table>
</div>

Comparison

Option	Recalls patients	Cost
Paper register	No	₹0
Practice software	Manual	₹6–15k
Dentomate	Automatic	Per clinic

Show code

<div class="table-scroll">
  <table class="cmp">
    <thead><tr><th>Option</th><th>Recalls patients</th><th>Cost</th></tr></thead>
    <tbody>
      <tr><td>Paper register</td><td><span class="n"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg> No</span></td><td class="mono">₹0</td></tr>
      <tr><td>Practice software</td><td><span class="n"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg> Manual</span></td><td class="mono">₹6–15k</td></tr>
      <tr class="us"><td>Dentomate</td><td><span class="y"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg> Automatic</span></td><td class="mono">Per clinic</td></tr>
    </tbody>
  </table>
</div>

Wrap wide tables in .table-scroll so they scroll inside their container instead of pushing the page sideways. Yes and no carry an icon and a word, never colour alone.