MastorsCDN Table Classes Documentation

This documentation outlines the structure, styling, and behavior of table-related classes provided by the mastorsCDN CSS library. Two primary table styles are supported: .table and .table-2, each with distinct features and optional modifiers.

1. .table Class

The .table class provides a simple, clean, and fully responsive table design with a dark header and alternating row colors.

Preview

Structure

• Base Class: .table
• Elements: <table>, <thead>, <tbody>, <tr>, <th>, <td>

Styling

• Table:
  • width: 100% - Full-width table.
  • border-collapse: collapse - Removes spacing between cells.
• Header (<thead>):
  • background-color: $dark - Dark background for the header row.
  • <th>:
    • color: white - White text.
    • text-align: center - Centered text.
    • padding: 1rem - Consistent padding.
    • border: 1px solid $silver - Silver border around each header cell.
• Body (<tbody>):
  • <tr>:
    • border: 1px solid $silver - Silver border around rows.
    • padding: 0.5rem - Row padding.
    • :nth-child(even) - Even rows have a light gray background (#ececec).
    • :hover - Rows lighten on hover (#f8f8f8).
  • <td>:
    • text-align: center - Centered text.
    • padding: 0.5rem - Consistent padding.
    • border: 1px solid $silver - Silver border around each cell.

Usage Example

<table class="table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
  </tbody>
</table>

2. .table-2 Class

The .table-2 class offers a more modern and customizable table design with scrollable options, hover effects, and additional modifiers.

Preview

Structure

• Base Class: .table-2
• Modifiers: .scroll-x, .scroll-y, .border-all, .scale-1
• Elements: <table>, <thead>, <tbody>, <tr>, <th>, <td>

Styling

• Table:
  • width: 100% - Full-width table.
  • border-collapse: separate - Maintains cell spacing.
  • border-spacing: 0 - No gaps between cells.


• Header (<thead>):
  • <th>:
    • background: #eeeeee - Light gray background.
    • color: #333 - Dark text.
    • padding: 1rem 1.5rem - Generous padding.
    • text-align: center - Centered text.
    • text-transform: uppercase - Uppercase text.
    • :last-child - No right border on the last header cell.
• Body (<tbody>):
  
  • <tr>:
    • transition: background 0.3s ease - Smooth background transitions.
    • :nth-child(even) - Even rows have a light blue-gray background (#f7f9fc).
    • :hover:not(:first-child) - Rows darken on hover (#e8ecef), excluding the header.
    • :last-child td - No bottom border on the last row's cells.
  • <td>:
    • padding: 16px 20px - Spacious padding.
    • color: #2d3436 - Dark gray text.
    • vertical-align: middle - Vertically centered content.
    • transition: background 0.3s ease - Smooth background transitions.
    • :last-child - No right border on the last cell.

Modifiers

1. .scroll-x:
   • Enables horizontal scrolling (overflow-x: auto).
   • Disables vertical scrolling (overflow-y: hidden).
   • On mobile (max-width: 768px), enforces white-space: nowrap for horizontal content.
2. .scroll-y:
   • Enables vertical scrolling (overflow-y: auto).
   • Disables horizontal scrolling (overflow-x: hidden).
3. .scroll-x.scroll-y:
   • Combines both horizontal and vertical scrolling (overflow-x: auto; overflow-y: auto).


4. .border-all:
   • Adds a full border to all cells:
   • border-top: 1px solid #ccc - Top border on <th>.
   • border-right: 1px solid #ccc - Right border on <td> and <th>.
   • border-bottom: 1px solid #ccc - Bottom border on <td> and <th>.
   • border-left: 1px solid #ccc - Left border on first <td> and <th> in each row.
   • Ensures the last row has a bottom border.
5. .scale-1:
   • Adds a subtle scaling effect on hover for even rows:
   • transition: transform 0.2s ease, background 0.3s ease - Smooth scaling and background change.
   • :hover:not(:first-child) - Scales to 1.01 and changes background to #e8ecef.

Scrollbar Styling

• Webkit Scrollbars:
  • height: 12px; width: 12px - Consistent scrollbar size.
  • Track: Light gray (#ecf0f1) with rounded corners and subtle shadow.
  • Thumb:
    • Gradient background (#34495e to #5d788f).
    • border: 2px solid #ecf0f1 - Light border.
    • :hover - Darker gradient (#2c3e50 to #4b6580) with a lighter border (#dfe6e9).
    • :active - Solid dark color (#2c3e50).

Responsive Behavior

• Media Query (max-width: 768px):
  • display: block - Table becomes a block element.
  • -webkit-overflow-scrolling: touch - Smooth scrolling on mobile.
  • border: 1px solid #34495e - Adds a border around the table.
  • <th>, <td>:
    • padding: 12px - Reduced padding.
    • font-size: 0.9em - Smaller text.
  • .scroll-x - Enforces white-space: nowrap for horizontal scrolling.

Usage Example

<table class="table-2 border-all scroll-x scale-1">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
  </tbody>
</table>

Key Differences Between .table and .table-2

Notes

• The SCSS relies on a color-map file for variables like $dark and $silver. Ensure this file is correctly imported.
• The .table-2 class is more feature-rich and suitable for complex, interactive tables, while .table is ideal for simpler layouts.

This documentation provides a comprehensive guide to using the table classes in your mastorsCDN library.