Tables

The Codebase .table class expands tables to 100% width and adds some padding and a border around every table cell.

Also, all table cells have their content vertical-aligned to the top, and aligned left for LTR or right for RTL.

.table

Table Header 1	Table Header 2	Table Header 3
Table content 1.1	Table content 2.1	Table content 3.1
Table content 1.2	Table content 2.2	Table content 3.2
Table content 1.3	Table content 2.3	Table content 3.3
Table content 1.4	Table content 2.4	Table content 3.4

Table Variations

The following table modifier classes can be used separately or in combination:

.table.table-borderless – removes all the borders (but you can put borders on cells of your choice by border utility classes):

Table Header 1	Table Header 2	Table Header 3
Table content 1.1	Table content 2.1	Table content 3.1
Table content 1.2	Table content 2.2	Table content 3.2
Table content 1.3	Table content 2.3	Table content 3.3
Table content 1.4	Table content 2.4	Table content 3.4

.table.table-compact – provides less padding in table cells:

Table Header 1	Table Header 2	Table Header 3
Table content 1.1	Table content 2.1	Table content 3.1
Table content 1.2	Table content 2.2	Table content 3.2
Table content 1.3	Table content 2.3	Table content 3.3
Table content 1.4	Table content 2.4	Table content 3.4

.table.table-striped – applies a transparent white tint and a transparent black tint to alterating rows:

Table Header 1	Table Header 2	Table Header 3
Table content 1.1	Table content 2.1	Table content 3.1
Table content 1.2	Table content 2.2	Table content 3.2
Table content 1.3	Table content 2.3	Table content 3.3
Table content 1.4	Table content 2.4	Table content 3.4

.table.table-nowrap – prevents table content wrapping in every table cell:

Table Header 1	Table Header 2	Table Header 3	Table Header 4	Table Header 5	Table Header 6
Table content 1.1	Table content 2.1	Table content 3.1	Table content 4.1	Table content 5.1	Table content 6.1
Table content 1.2	Table content 2.2	Table content 3.2	Table content 4.2	Table content 5.2	Table content 6.2
Table content 1.3	Table content 2.3	Table content 3.3	Table content 4.3	Table content 5.3	Table content 6.3
Table content 1.4	Table content 2.4	Table content 3.4	Table content 4.4	Table content 5.4	Table content 6.4

Codebase Tables Are Responsive

If you add class .table to a <table>, then codebase.js will add <div class="table-wrap"> around the table. This wrapper’s CSS works to enable responsive overflow by horizontal scrolling – if required by a table being wider than the available width.

Example: a wide table that is horizontally scrollable at all screen widths:

Table Header 1	Table Header 2	Table Header 3	Table Header 4	Table Header 5	Table Header 6	Table Header 7	Table Header 8	Table Header 9	Table Header 10	Table Header 11	Table Header 12	Table Header 13	Table Header 14	Table Header 15
Table content 1.1	Table content 2.1	Table content 3.1	Table content 4.1	Table content 5.1	Table content 6.1	Table content 7.1	Table content 8.1	Table content 9.1	Table content 10.1	Table content 11.1	Table content 12.1	Table content 13.1	Table content 14.1	Table content 15.1
Table content 1.2	Table content 2.2	Table content 3.2	Table content 4.2	Table content 5.2	Table content 6.2	Table content 7.2	Table content 8.2	Table content 9.2	Table content 10.2	Table content 11.2	Table content 12.2	Table content 13.2	Table content 14.2	Table content 15.2
Table content 1.3	Table content 2.3	Table content 3.3	Table content 4.3	Table content 5.3	Table content 6.3	Table content 7.3	Table content 8.3	Table content 9.3	Table content 10.3	Table content 11.3	Table content 12.3	Table content 13.3	Table content 14.3	Table content 15.3

Table Classes

Class	Notes
.table	The responsive table component block. Apply this class only to <table> tags.
.table-rows	Adds a top border to every table body row.
.table-grid	Adds a border around every table cell.
.table-striped	Applies a white tint and a black tint to alternating rows.
.table-compact	Sets the table cell padding to 0.25rem (= ½ element grid unit).
.table-nowrap	Prevents white-space wrapping (in every table cell).1

¹ If you require nowrap only on some table cells and not others, you can use the text utility class .nowrap applied to the th or td where you need it.

---