Tables

The HTML <table> element is used to display tabular data. Tables have rows, cells , header cells and also can include <thead>, <tbody> or <tfooter> which wrap their respective table data. Here’s an example of a table markup and the default styles:

<table>
  <tr>
    <th>...</th>
    <th>...</th>
    <th>...</th>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>
# Table Header Table Header Table Header
1 Table cell Table cell Table cell
2 Table cell Table cell Table cell
3 Table cell Table cell Table cell

You’ll notice that the base styles for a table are almost untouched. That’s because tables are used in a wide array of data on the web, so any sort of custom styles that BaseWeb has available are best applied using modifier classes and mixins for semantic applications.

Variable Map

Table variables are encompassed within the $tables map and are used throughout all table mixins to set default values.

$tables: (
  'output' : true,
  'class' : 'table',

  'valign' : top,
  'nth' : odd,
  'stripe' : horizontal,

  'margin' : 2em 0,
  'padding-condensed' : 0.25em 0.5em,
  'padding' : 0.5em 0.75em,
  'padding-expanded' : 1em 1.25em,

  'background' : none,
  'background-stripe' : rgba($black, 0.05),
  'background-hover' : $yellow-50,
  'border' : 1px solid rgba($black, 0.1),
  'border-radius' : $border-radius,

) !default;

make-table

Creates the base styles for a table modifier mixin or class. Usually applied directly through a base table class, mixin or an extend placeholder. If table modifier classes are enabled, you are provided .table for your base table class.

@include make-table( $options: () );
Variable Type Default
$options Map $tables

Example Usage

Using the base table mixin for custom tables. This example shows us using a %base-table placeholder for the extend method.

%base-table {
  @include make-table();
}
.table-example-1 {
  @extend %base-table;
  ...
}
.table-example-2 {
  @extend %base-table;
  ...
}

add-table-rowed

Adds borders to a table that divide table rows. Requires the use of base table styles through base table class, mixin or extend.

@include add-table-rowed( $options: () );
Variable Type Default
$options Map $tables

Example Usage

.custom-table {
  @include make-table();
  @include add-table-rowed();
}
<table class="table rowed">
  ...
</table>
# Table Header Table Header Table Header
1 Table cell Table cell Table cell
2 Table cell Table cell Table cell
3 Table cell Table cell Table cell

add-table-columned

Adds borders to a table that divide table columns. Requires the use of base table styles through base table class, mixin or extend.

@include add-table-columned( $options: () );
Variable Type Default
$options Map $tables

Example Usage

.custom-table {
  @include make-table();
  @include add-table-columned();
}
<table class="table columned">
  ...
</table>
# Table Header Table Header Table Header
1 Table cell Table cell Table cell
2 Table cell Table cell Table cell
3 Table cell Table cell Table cell

add-table-bordered

Adds borders to a table that divide table cells. Requires the use of base table styles through base table class, mixin or extend.

@include add-table-bordered( $options: () );
Variable Type Default
$options Map $tables

Example Usage

.custom-table {
  @include make-table();
  @include add-table-bordered();
}
<table class="table bordered">
  ...
</table>
# Table Header Table Header Table Header
1 Table cell Table cell Table cell
2 Table cell Table cell Table cell
3 Table cell Table cell Table cell

add-table-size

Toggles a tables padding size between condensed, expanded or a custom padding value.

@include add-table-size( $size, $options: () );
Variable Type Default
$size condensed | expanded | Unit (pixel, em, percent) None
$options Map $tables

Example Usage

As a mixin, this is used when overriding the inherited table size of more general table styles.

.all-tables {
  @include make-table();
  @include add-table-bordered();
}
.small-tables {
  @extend .all-tables;
  @include add-table-size(condensed);
}
.custom-tables {
  @extend .all-tables;
  @include add-table-size(8px 16px);
}

When class modifiers are enabled, you have the two sizing utility classes: .condensed and .expanded. This are primarily used along side the base and style modifier classes.

<table class="table bordered condensed">
  ...
</table>
# Table Header Table Header Table Header
1 Table cell Table cell Table cell
2 Table cell Table cell Table cell
3 Table cell Table cell Table cell
<table class="table bordered expanded">
  ...
</table>
# Table Header Table Header Table Header
1 Table cell Table cell Table cell
2 Table cell Table cell Table cell
3 Table cell Table cell Table cell

add-table-rounded

Gives a table rounded borders depending on parameters passed.

@include add-table-rounded( $radius, $options: () );
Variable Type Default
$radius Unit (pixel, em, percent) $tables('border-radius')
$options Map $tables

Example Usage

.custom-table {
  @include make-table();
  @include add-table-bordered();
  @include add-table-rounded();
}
<table class="table bordered rounded">
  ...
</table>
# Table Header Table Header Table Header
1 Table cell Table cell Table cell
2 Table cell Table cell Table cell
3 Table cell Table cell Table cell

add-table-stripes

Gives a table stripes either vertical or horizontal depending on parameters passed.

@include add-table-stripes( $nth, $dir, $options: () );
Variable Type Default
$nth Nth (odd, even) $tables('nth')
$dir Orientation of stripes (vertical, horizontal) $tables('stripe')
$options Map $tables

Example Usage

.custom-table {
  @include make-table();
  @include add-table-bordered();
  @include add-table-stripes();
}
<table class="table bordered striped">
  ...
</table>
<table class="table bordered striped-horizontal">
  ...
</table>
# Table Header Table Header Table Header
1 Table cell Table cell Table cell
2 Table cell Table cell Table cell
3 Table cell Table cell Table cell
<table class="table bordered striped-vertical">
  ...
</table>
# # # # # # # #
1 2 3 4 5 6 7 8
I II III IV V VI VII VIII
a b c d e f g h
A B C D E F G H

add-table-hover

Gives table hover styles for rows.

@include add-table-hover( $bg-hover, $options: () );
Variable Type Default
$bg-hover Color $tables('background-hover')
$options Map $tables

Example Usage

.custom-table {
  @include make-table();
  @include add-table-bordered();
  @include add-table-hover();
}
<table class="table bordered hover">
  ...
</table>
# Table Header Table Header Table Header
1 Table cell Table cell Table cell
2 Table cell Table cell Table cell
3 Table cell Table cell Table cell

add-table-alignment

Sets the vertical and text alignment of a table if a parameter is passed.

@include add-table-alignment( $options: () );
Variable Type Default
$options Map ('vertical-align', 'text-align') None

Example Usage

If you don’t have class modifiers enabled, or just want to set table alignment in your SCSS, just pass in the alignment settings you’d like set.

// SCSS
.table-custom-alignment {
  ...
  @include add-table-alignment((
    'vertical-align': middle,
    'text-align': center
  ));
}

// CSS Output
.table-custom-alignment tr {
  vertical-align: middle;
}
.table-custom-alignment tr td,
.table-custom-alignment tr th {
  text-align: center;
}

Available Classes

.valign-baseline Applies vertical-align: baseline; to table rows.
.valign-top Applies vertical-align: top; to table rows.
.valign-middle Applies vertical-align: middle; to table rows.
.valign-bottom Applies vertical-align: bottom; to table rows.
.align-left Aligns text to the left for all table cells.
.align-center Aligns text to the center for all table cells.
.align-right Aligns text to the right for all table cells.
<table class="bordered table-align-center">
  ...
</table>

make-table-responsive

When added to a wrapping element of a table, will make the table responsive for tablets and below.

@include make-table-responsive( $options: () );
Variable Type Default
$options Map $tables

Example Usage

Simply wrap a div with the .table-responsive class or apply the make-table-responsive() mixin to a div wrapping a table to create this effect. Keep in mind that it’s triggered using media-max('tablet').

<div class="table-responsive">
  <table class="table bordered">
    ...
  </table>
</div>
# Table Header Table Header Table Header
1 Table cell Table cell Table cell
2 Table cell Table cell Table cell
3 Table cell Table cell Table cell

© 2018 . All rights reserved.