Skip to content
KolayCSS

Tables

Tables display data. Striped, bordered and hover variants are available.

Live demo

Striped + hover

# Product Price Status
1 Laptop $999 In stock
2 Phone $699 Low stock
3 Headphones $99 Sold out

Bordered

Name City
AdamBerlin
AyşeIstanbul

Code

<table class="table table-striped table-hover">
  <thead>
    <tr><th>#</th><th>Product</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Laptop</td></tr>
  </tbody>
</table>

Tip: wrap the table in .table-responsive for horizontal scrolling on narrow screens.