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 duck Found where
Mallard Pretty much everywhere
Alabio duck Various parts of Indonesia
Canvasback North America
Fulvous whistling duck South America, sub-Saharan Africa and the Indian subcontinent
Marbled duck Southern Europe, Northern Africa, Asia
<table class="table">
  <thead>
    <tr>
      <th>Type of duck</th>
      <th>Found where</th>
    </tr>
  </thead>
  <tbody>
    <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 duck Found where
Mallard Pretty much everywhere
Alabio duck Various parts of Indonesia
Canvasback North America
Fulvous whistling duck South America, sub-Saharan Africa and the Indian subcontinent
Marbled duck Southern 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 duck Found where
Mallard Pretty much everywhere
Alabio duck Various parts of Indonesia
Canvasback North America
Fulvous whistling duck South America, sub-Saharan Africa and the Indian subcontinent
Marbled duck Southern 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 duck Found where
Mallard Pretty much everywhere
Alabio duck Various parts of Indonesia
Canvasback North America
Fulvous whistling duck South America, sub-Saharan Africa and the Indian subcontinent
Marbled duck Southern 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 duck Found where
Mallard Pretty much everywhere
Alabio duck Various parts of Indonesia
Canvasback North America
Fulvous whistling duck South America, sub-Saharan Africa and the Indian subcontinent
Marbled duck Southern 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 duck Found where
Mallard Pretty much everywhere
Alabio duck Various parts of Indonesia
Canvasback North America
Fulvous whistling duck South America, sub-Saharan Africa and the Indian subcontinent
Marbled duck Southern 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 duck Found where
Mallard Pretty much everywhere
Alabio duck Various parts of Indonesia
Canvasback North America
Fulvous whistling duck South America, sub-Saharan Africa and the Indian subcontinent
Marbled duck Southern 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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
2 4 6 8 10 12 14 16 18 20 22 24 26 28 30 32 34 36 38 40 42 44 46 48 50 52 54 56 58 60 62 64 66 68 70 72 74 76 78 80 82 84 86 88 90 92 94 96 98 100 102 104 106 108 110 112 114 116 118 120 122 124 126 128 130 132 134 136 138 140 142 144 146 148 150 152 154 156 158 160 162 164 166 168 170 172 174 176 178 180 182 184 186 188 190 192 194 196 198 200
3 6 9 12 15 18 21 24 27 30 33 36 39 42 45 48 51 54 57 60 63 66 69 72 75 78 81 84 87 90 93 96 99 102 105 108 111 114 117 120 123 126 129 132 135 138 141 144 147 150 153 156 159 162 165 168 171 174 177 180 183 186 189 192 195 198 201 204 207 210 213 216 219 222 225 228 231 234 237 240 243 246 249 252 255 258 261 264 267 270 273 276 279 282 285 288 291 294 297 300
4 8 12 16 20 24 28 32 36 40 44 48 52 56 60 64 68 72 76 80 84 88 92 96 100 104 108 112 116 120 124 128 132 136 140 144 148 152 156 160 164 168 172 176 180 184 188 192 196 200 204 208 212 216 220 224 228 232 236 240 244 248 252 256 260 264 268 272 276 280 284 288 292 296 300 304 308 312 316 320 324 328 332 336 340 344 348 352 356 360 364 368 372 376 380 384 388 392 396 400
5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100 105 110 115 120 125 130 135 140 145 150 155 160 165 170 175 180 185 190 195 200 205 210 215 220 225 230 235 240 245 250 255 260 265 270 275 280 285 290 295 300 305 310 315 320 325 330 335 340 345 350 355 360 365 370 375 380 385 390 395 400 405 410 415 420 425 430 435 440 445 450 455 460 465 470 475 480 485 490 495 500
<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.

Variable Type Default Value
$table-border-color color #dbdbdb
$table-border-width units 1px
$table-head-border-width border-width 1px 0 2px
$table-body-border-width border-width 0 0 1px
$table-font-size units 1rem
$table-padding padding 0.5rem 0.625rem
$table-hover color #f9f9f9
$table-stripe color #f9f9f9
$table-small-padding padding 0.25rem 0.5rem