Tables Style

The Phenix Design System provides clean, modern styling for tables with support for different visual variants, responsive behavior, and customizable options.

Overview

Tables in the Phenix Design System include:

• Default, clean table styling
• Striped rows for better readability
• Bordered tables with full grid lines
• Borderless tables for minimal styling
• Responsive table support for mobile devices

Basic Usage

To create a standard table, simply add the .table class to your table element:

<table class="table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

The .table class provides:

• 100% width by default
• Collapse border model
• Bottom borders for rows
• Balanced padding for cells
• No styling for backgrounds (can be added via options)

Table Variants

Striped Table

Add the .striped class to create alternating background colors for rows, which improves readability for tables with many rows:

<table class="table striped">
  <!-- table content -->
</table>

Striped tables use the --table-striped color variable (default: #f4f4f4) for the alternating row backgrounds.

Bordered Table

Add the .bordered class to create a fully bordered table with grid lines between all cells:

<table class="table bordered">
  <!-- table content -->
</table>

Bordered tables use the --table-border variable (default: 1px solid rgba(0,0,0, 0.1)) for all borders.

Borderless Table

Add the .borderless class to remove all borders from the table:

<table class="table borderless">
  <!-- table content -->
</table>

This creates a minimal table with no visible borders, useful for simple data presentation or when borders would clutter the design.

Responsive Tables

For tables with many columns that might not fit on mobile screens, wrap your table in a .table-responsive container:

<div class="table-responsive">
  <table class="table">
    <!-- table with many columns -->
  </table>
</div>

This creates a horizontally scrollable container when the table is too wide for the viewport.

Breakpoint-Specific Responsive Containers

You can apply responsive behavior at specific breakpoints:

<!-- Only becomes scrollable on small screens and below -->
<div class="table-responsive-sm">
  <table class="table"><!-- table content --></table>
</div>

<!-- Only becomes scrollable on medium screens and below -->
<div class="table-responsive-md">
  <table class="table"><!-- table content --></table>
</div>

<!-- Only becomes scrollable on large screens and below -->
<div class="table-responsive-lg">
  <table class="table"><!-- table content --></table>
</div>

<!-- Only becomes scrollable on extra-large screens and below -->
<div class="table-responsive-xl">
  <table class="table"><!-- table content --></table>
</div>

Each responsive table variant has a pre-defined table width appropriate for that breakpoint.

Customization Options

Tables in Phenix Design System can be customized using CSS variables:

.table {
  --table-background: inherit;  /* Table background color */
  --table-head-bg: inherit;     /* Header background color */
  --table-striped: #f4f4f4;     /* Striped row background */
  --table-border: 1px solid rgba(0,0,0, 0.1); /* Border style */
  --table-padding: 15px;        /* Cell padding */
  --table-radius: 5px;          /* Border radius (when applicable) */
}

You can override these variables for individual tables or globally in your stylesheet.

WordPress Integration

For WordPress users, the styling automatically applies to WordPress-generated tables:

<!-- WordPress block editor table -->
<figure class="wp-block-table">
  <table>
    <!-- table content -->
  </table>
</figure>

The styling will be applied to all wp-block-table table elements.

Table Cell Spacing

The Phenix Design System uses different padding for header and data cells:

• Header cells (<th>) get slightly more vertical padding (--table-padding / 1.5)
• Data cells (<td>) get slightly less vertical padding (--table-padding / 2.25)
• All cells get the full horizontal padding (--table-padding)

This creates a visual hierarchy that distinguishes headers from data.

Combining Table Styles

You can combine table variants for different effects:

<!-- Striped and bordered table -->
<table class="table striped bordered">
  <!-- table content -->
</table>

Examples

Basic Data Table

<table class="table">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product A</td>
      <td>$19.99</td>
      <td>In Stock</td>
    </tr>
    <tr>
      <td>Product B</td>
      <td>$29.99</td>
      <td>Limited</td>
    </tr>
    <tr>
      <td>Product C</td>
      <td>$39.99</td>
      <td>Out of Stock</td>
    </tr>
  </tbody>
</table>

Striped Pricing Table

<table class="table striped">
  <thead>
    <tr>
      <th>Plan</th>
      <th>Features</th>
      <th>Price</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Basic</td>
      <td>5 Users, 10GB Storage</td>
      <td>$29/month</td>
      <td><button class="btn primary">Select</button></td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>25 Users, 100GB Storage</td>
      <td>$99/month</td>
      <td><button class="btn primary">Select</button></td>
    </tr>
    <tr>
      <td>Enterprise</td>
      <td>Unlimited Users, 1TB Storage</td>
      <td>$199/month</td>
      <td><button class="btn primary">Select</button></td>
    </tr>
  </tbody>
</table>

Responsive Table with Many Columns

<div class="table-responsive">
  <table class="table bordered">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Address</th>
        <th>City</th>
        <th>State</th>
        <th>Zip</th>
        <th>Country</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td>(123) 456-7890</td>
        <td>123 Main St</td>
        <td>Anytown</td>
        <td>CA</td>
        <td>12345</td>
        <td>USA</td>
        <td><button class="btn">Edit</button></td>
      </tr>
      <!-- More rows -->
    </tbody>
  </table>
</div>