Wake Creators LogoCSS - Components Squid Style
Getting Started
Content
Dark Mode VariablesIconsImagesTableExempleTypography
Layout
Forms
Components
Utilities
Styleguide

Table

To usa table just add .table on <table> tag. The <th> tag has a default border. Use colors border classes to change or overwrite with css on <th> tag

Exemple

#Column 1Column 2
1Column 2Column 3
2Column 2Column 3
3Column 2Column 3
<table class="table table-responsive">
  <thead>
    <tr>
      <th scope="col" class='border-pink'>#</th>
      <th scope="col" class='border-pink'>Column 1</th>
      <th scope="col" class='border-pink last-col'>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td>
        Column 2
      </td>
      <td>
        Column 3
      </td>
    </tr>
    <tr>
      <td>
        2
      </td>
      <td>
        Column 2
      </td>
      <td>
        Column 3
      </td>
    </tr>
    <tr>
      <td>
        3
      </td>
      <td>
        Column 2
      </td>
      <td>
        Column 3
      </td>
    </tr>
  </tbody>
</table>

Responsive Overflow

With the .table-overflow class on parent container if the width of the parent element is smaller than the table's contents, it will generate a horizontal overflow

#Column 1Column 2
1

Column 2

Column 3
2

Column 2

Column 3
3

Column 2

Column 3
<div class='table-overflow'>
  <table class="table table-overflow">
    ...
  </table>
</div>

Mobile Table

The table using the .table-responsive class on lg breaktpoint (< 992px) makes each row of the table have its respective column inverted per row since the <td> has the attribute data-label filled

#Column 1Column 2
1

Column 2

Column 3

2

Column 2

Column 3

3

Column 2

Column 3

<table class="table table-responsive">
  ...
  <tr>
    <td data-label='Column 1'>
      1
    </td>
    <td data-label='Column 2'>
      <p
        class='text-ellipsis'
      >
        Column 2
      </p>
    </td>
    <td data-label='Column 3'>
      <p
        class='text-ellipsis'
      >
        Column 3
      </p>
    </td>
  </tr>
</table>

Buttons Hover

To use the hover in the table row to show the buttons create a column with the .wrapper-buttons class.

#Column 1Column 2Actions
1

Column 2

Column 3

2

Column 2

Column 3

3

Column 2

Column 3

<table class="table">
  ...
  <tbody>
    ...
      <td class='wrapper-buttons' data-label='Actions'>
       <!-- Bottons or other elements here -->
      </td>
  ...