Basic Table
Name Type Description
--mdst-color-fg Color Foreground / text color
--mdst-color-bg Color Background color
--mdst-color-border Color Border color
Variants
Class Description
.mdst-table--bordered Adds borders to all cells
.mdst-table--striped Alternating row backgrounds
.mdst-table--compact Smaller cell padding
.mdst-table--fixed Fixed column widths
.mdst-table--stack Stacks rows vertically on mobile
Scroll Wrapper

Wrap tables in .mdst-table-wrap for horizontal scrolling on overflow.

Column 1 Column 2 Column 3 Column 4 Column 5
Cell content Cell content Cell content Cell content Cell content
Stack Variant (resize to see)
Class Example
.mdst-button
.mdst-button--inverted
.mdst-button--ghost
Bordered Variant
Property Default Description
radius 0 Border radius for components
border-width 1px Default border thickness
Striped Variant
Property Default
transition 150ms
line-height 1.5
radius 0
border-width 1px
Usage
<!-- Basic table -->
<table class="mdst-table">
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

<!-- With scroll wrapper -->
<div class="mdst-table-wrap">
  <table class="mdst-table">...</table>
</div>

<!-- Stack on mobile -->
<table class="mdst-table mdst-table--stack">...</table>

<!-- Combined variants -->
<table class="mdst-table mdst-table--bordered mdst-table--striped">...</table>