Table

Simple enhancements to HTML tables

Adding the table class to your existing HTML tables will allow you to make use of OrbitCSS' table modifiers for cleaner and improved table UI.

Type of duckFound where
MallardPretty much everywhere
Alabio duckVarious parts of Indonesia
CanvasbackNorth America
Fulvous whistling duckSouth America, sub-Saharan Africa and the Indian subcontinent
Marbled duckSouthern Europe, Northern Africa, Asia
<table class="table">
  <thead>
    <tr>
      <th>Type of duck</th>
      <th>Found where</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mallard</td>
      <td>Pretty much everywhere</td>
    </tr>
    <tr>
      <td>Alabio duck</td>
      <td>Various parts of Indonesia</td>
    </tr>
    <tr>
      <td>Canvasback</td>
      <td>North America</td>
    </tr>
    <tr>
      <td>Fulvous whistling duck</td>
      <td>South America, sub-Saharan Africa and the Indian subcontinent</td>
    </tr>
    <tr>
      <td>Marbled duck</td>
      <td>Southern Europe, Northern Africa, Asia</td>
    </tr>
  </tbody>
</table>
</> Show code
Copy

Style

Border

The is-bordered modifier will add a border around each cell in the table.


Type of duckFound where
MallardPretty much everywhere
Alabio duckVarious parts of Indonesia
CanvasbackNorth America
Fulvous whistling duckSouth America, sub-Saharan Africa and the Indian subcontinent
Marbled duckSouthern Europe, Northern Africa, Asia
<table class="table is-bordered">
  ...
</table>
Copy

The is-borderless modifier will remove all borders from every cell in the table.


Type of duckFound where
MallardPretty much everywhere
Alabio duckVarious parts of Indonesia
CanvasbackNorth America
Fulvous whistling duckSouth America, sub-Saharan Africa and the Indian subcontinent
Marbled duckSouthern Europe, Northern Africa, Asia
<table class="table is-borderless">
  ...
</table>
Copy

The has-outline modifier will add a border around the outside of the table.


Type of duckFound where
MallardPretty much everywhere
Alabio duckVarious parts of Indonesia
CanvasbackNorth America
Fulvous whistling duckSouth America, sub-Saharan Africa and the Indian subcontinent
Marbled duckSouthern Europe, Northern Africa, Asia
<table class="table has-outline">
  ...
</table>
Copy

Hover

You can add a hover effect to each row of the table's body with the is-hoverable modifier.


Type of duckFound where
MallardPretty much everywhere
Alabio duckVarious parts of Indonesia
CanvasbackNorth America
Fulvous whistling duckSouth America, sub-Saharan Africa and the Indian subcontinent
Marbled duckSouthern Europe, Northern Africa, Asia
<table class="table is-hoverable">
  ...
</table>
Copy

Striped rows

You can add stripes to the table with the is-striped modifier. This will color every odd row. If you want to color by even rows, use the is-even-striped modifier.


Type of duckFound where
MallardPretty much everywhere
Alabio duckVarious parts of Indonesia
CanvasbackNorth America
Fulvous whistling duckSouth America, sub-Saharan Africa and the Indian subcontinent
Marbled duckSouthern Europe, Northern Africa, Asia
<table class="table is-striped">
  ...
</table>
Copy

Small rows

The is-small modifier will make every table row thin by reducing each cell's padding.


Type of duckFound where
MallardPretty much everywhere
Alabio duckVarious parts of Indonesia
CanvasbackNorth America
Fulvous whistling duckSouth America, sub-Saharan Africa and the Indian subcontinent
Marbled duckSouthern Europe, Northern Africa, Asia
<table class="table is-small">
  ...
</table>
Copy

Table container

Use the is-table-container modifier on the parent element of your table to create a horizontal scrollable table.


123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
2468101214161820222426283032343638404244464850525456586062646668707274767880828486889092949698100102104106108110112114116118120122124126128130132134136138140142144146148150152154156158160162164166168170172174176178180182184186188190192194196198200
369121518212427303336394245485154576063666972757881848790939699102105108111114117120123126129132135138141144147150153156159162165168171174177180183186189192195198201204207210213216219222225228231234237240243246249252255258261264267270273276279282285288291294297300
4812162024283236404448525660646872768084889296100104108112116120124128132136140144148152156160164168172176180184188192196200204208212216220224228232236240244248252256260264268272276280284288292296300304308312316320324328332336340344348352356360364368372376380384388392396400
5101520253035404550556065707580859095100105110115120125130135140145150155160165170175180185190195200205210215220225230235240245250255260265270275280285290295300305310315320325330335340345350355360365370375380385390395400405410415420425430435440445450455460465470475480485490495500
<div class="is-table-container">
  <table class="table is-bordered is-striped">
    ...
  </table>
</div>
Copy

The scrollbar will only appear if the table's content cannot fit into the available width.


Variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.


VariableTypeDefault value
$table-border-colorcolor#dbdbdb
$table-border-widthunits1px
$table-head-border-widthborder-width1px 0 2px
$table-body-border-widthborder-width0 0 1px
$table-font-sizeunits1rem
$table-paddingpadding0.5rem 0.625rem
$table-hovercolor#f9f9f9
$table-stripecolor#f9f9f9
$table-small-paddingpadding0.25rem 0.5rem