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
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>
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>
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>
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>
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>
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>
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>
The scrollbar will only appear if the table's content cannot fit into the available width.
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 |