Tables

Documentation and examples for opt-in styling of table component of Phenix Design System.

Overview

Due to the widespread use of <table> elements across third-party widgets like calendars and date pickers, PDS tables are opt-in, Add the base class .table to any <table>, then extend with our optional modifier classes or custom styles. All table styles are not inherited, meaning any nested tables can be styled independently from the parent.

<!-- Table -->
<table class="table">
<!-- Headlines -->
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone No.</th>
<th>Rule</th>
</tr>
</thead>
<!-- Body -->
<tbody>
<!-- Row -->
<tr>
<td>01</td>
<td>Abdullah</td>
<td>Ramadan</td>
<td>02-01122974539</td>
<td>PDS Creator</td>
</tr>
<!-- // Row -->
</tbody>
<!-- // Body -->
</table>
<!-- // Table -->

/*==== Tables CSS ====*/
.table {
/*==== Options ====*/
--table-background : inherit;
--table-head-bg : inherit;
--table-striped : #f4f4f4;
--table-border : 1px solid rgba(0,0,0, 0.1);
--table-padding : 15px;
--table-radius : 5px;
}

Striped rows

Use .striped to add zebra striping to any table row within the <tbody>.

<!-- Table -->
<table class="table striped">
...
</table>
<!-- // Table -->

/*==== Tables CSS ====*/
.table {
/*==== Options ====*/
--table-background : inherit;
--table-head-bg : inherit;
--table-striped : #f4f4f4;
--table-border : 1px solid rgba(0,0,0, 0.1);
--table-padding : 15px;
--table-radius : 5px;
}

Bordered Table

Use .bordered for borders on all sides of the table and cells.

<!-- Table -->
<table class="table bordered">
...
</table>
<!-- // Table -->

/*==== Tables CSS ====*/
.table {
/*==== Options ====*/
--table-background : inherit;
--table-head-bg : inherit;
--table-striped : #f4f4f4;
--table-border : 1px solid rgba(0,0,0, 0.1);
--table-padding : 15px;
--table-radius : 5px;
}

Tables without borders

Use .borderless for a table without borders.

<!-- Table -->
<table class="table borderless">
...
</table>
<!-- // Table -->

/*==== Tables CSS ====*/
.table {
/*==== Options ====*/
--table-background : inherit;
--table-head-bg : inherit;
--table-striped : #f4f4f4;
--table-border : 1px solid rgba(0,0,0, 0.1);
--table-padding : 15px;
--table-radius : 5px;
}

Responsive Tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table by using .table-responsive{-sm|-md|-lg|-xl} From that breakpoint and up, the table will behave normally and not scroll horizontally.

<!-- Table Wrapper -->
<div class="table-responsive">
<table class="table">
...
</table>
</div>
<!-- Table Wrapper -->

Utilities and Helpers

the table and all tr, td, th inside of it can benefit from PDS utilities like Colors, Backgrounds, Borders, and Alignment classes provided by phenix and you can see a list of the related helpers to the .table listed below.