Huesos
Style
Guide

Repositoire

GitHub

Preview

Table

By default, we enforte tables to take 100% of the available width and distribute cell spacing evenly.

You can add a .table wrapper that ensures that a basic responsive solution (using overflow-x) is set.

Borders are collapsed by default and <caption> receives a .minititle styling.

You can tweak the basic appearance using $table-border-width, $table-border-color, $table-padding and $table-th-align

Example

<section class="table">
    <table>
        <caption>Table Caption</caption>
        <thead>
            <tr>
                <th scope="col">Table Heading 1</th>
                <th scope="col">Table Heading 2</th>
                <th scope="col">Table Heading 3</th>
                <th scope="col">Table Heading 4</th>
                <th scope="col">Table Heading 5</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th>Footer 2</th>
                <th>Footer 3</th>
                <th>Footer 4</th>
                <th>Footer 5</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th scope="row">Row header</th>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <th scope="row">Row header</th>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <th scope="row">Row header</th>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <th scope="row">Row header</th>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
        </tbody>
    </table>
</section>

Assets

  • Filesystem Path: src/components/html/table/_table.scss
  • Size: 652 Bytes 
  • caption {
	text-align: $caption-align;
	@include minititle();
}

// We need to do some hacks to account for border-collapse
table {
	table-layout: fixed;
	min-width:100%;
	margin-bottom: calc( #{ritmo(4)} - #{$table-border-width} );
}

th, td {
	@include ritmo-top-border($table-border-width, 2);
	@include ritmo-side-border('left', $table-border-width, 2);
	@include ritmo-side-border('right', $table-border-width, 2);
	padding-bottom: ritmo(2);
	border-bottom: $table-border-width solid;
	border-style: solid;
	border-color: $table-border-color;
}

th {
	text-align: $table-th-align;
}

.table {
  overflow:auto;
  th,td {
    min-width:120px;
  }
}