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>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 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.

CSS variables

You can override the default table styles with CSS variables.

.table {
  --background-color: var(--color-white);
  --font-color: var(--color-black);
  --border-color: hsl(0deg, 0%, 86%, 1);
  --border-width: 1px;
  --font-size: 1rem;
  --padding: 0.5rem 0.625rem;
  --hover-background-color: hsl(0deg, 0%, 97%, 1);
  --stripe-background-color: hsl(0deg, 0%, 97%, 1);
}
Copy

Sass 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-background-color	color	hsl(0deg, 0%, 100%, 1)
$table-color	color	hsl(0deg, 0%, 22%, 1)
$table-border-color	color	hsl(0deg, 0%, 86%, 1)
$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	hsl(0deg, 0%, 98%, 1)
$table-stripe	color	hsl(0deg, 0%, 98%, 1)
$table-small-padding	padding	0.25rem 0.5rem

← Progress Bar

Tabs →