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 1	Column 2
1	Column 2	Column 3
2	Column 2	Column 3
3	Column 2	Column 3

Example :

<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 1	Column 2
1	Column 2	Column 3
2	Column 2	Column 3
3	Column 2	Column 3

Example :

<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 1	Column 2
1	Column 2	Column 3
2	Column 2	Column 3
3	Column 2	Column 3

Example :

<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 1	Column 2
1	Column 2	Column 3
2	Column 2	Column 3
3	Column 2	Column 3

Example :

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

Table

Exemple

Responsive Overflow

Mobile Table

Buttons Hover

results matching ""

No results matching ""