New This website is new, your feedback will help us to improve it.

Tables

Basic table

Use the .bsk-table class to apply basic table styles. This class is opt-in to ensure compatibility with tables managed by third party widgets or applications such as Apex.

Name Location
Ny-Ålesund Svalbard, High Arctic
Rothera Adelaide Island, Antarctica
Halley VI Brunt Ice Shelf, Antarctica 
<table class="bsk-table bsk-table-spacing w-full text-left">
  <thead>
    <tr>
      <th>Name</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ny-Ålesund</td>
      <td>Svalbard, High Arctic</td>
    </tr>
    <tr>
      <td>Rothera</td>
      <td>Adelaide Island, Antarctica</td>
    </tr>
    <tr>
      <td>Halley VI</td>
      <td>Brunt Ice Shelf, Antarctica</td>
    </tr>
  </tbody>
</table>

Striped rows

Add .bsk-table-striped to style alternate rows with the <tbody> of a table.

Name Location
Ny-Ålesund Svalbard, High Arctic
Rothera Adelaide Island, Antarctica
Halley VI Brunt Ice Shelf, Antarctica 
<table class="bsk-table bsk-table-striped bsk-table-spacing w-full text-left">
  <thead>
    <tr>
      <th>Name</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ny-Ålesund</td>
      <td>Svalbard, High Arctic</td>
    </tr>
    <tr>
      <td>Rothera</td>
      <td>Adelaide Island, Antarctica</td>
    </tr>
    <tr>
      <td>Halley VI</td>
      <td>Brunt Ice Shelf, Antarctica</td>
    </tr>
  </tbody>
</table>

Boardered rows

Name Location
Ny-Ålesund Svalbard, High Arctic
Rothera Adelaide Island, Antarctica
Halley VI Brunt Ice Shelf, Antarctica 
<table class="bsk-table bsk-table-bordered bsk-table-spacing w-full text-left">
  <thead>
    <tr>
      <th>Name</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ny-Ålesund</td>
      <td>Svalbard, High Arctic</td>
    </tr>
    <tr>
      <td>Rothera</td>
      <td>Adelaide Island, Antarctica</td>
    </tr>
    <tr>
      <td>Halley VI</td>
      <td>Brunt Ice Shelf, Antarctica</td>
    </tr>
  </tbody>
</table>

Hoverable rows

This is a good example of where the BAS style kit uses Tailwind classes directly. These classes are applied directly to individual elements rather than to a parent element.

Name Location
Ny-Ålesund Svalbard, High Arctic
Rothera Adelaide Island, Antarctica
Halley VI Brunt Ice Shelf, Antarctica 
<table class="bsk-table bsk-table-spacing w-full text-left">
  <thead>
    <tr>
      <th>Name</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr class="bg-gray-100 hover:bg-gray-300">
      <td>Ny-Ålesund</td>
      <td>Svalbard, High Arctic</td>
    </tr>
    <tr class="bg-gray-100 hover:bg-gray-300">
      <td>Rothera</td>
      <td>Adelaide Island, Antarctica</td>
    </tr>
    <tr class="bg-gray-100 hover:bg-gray-300">
      <td>Halley VI</td>
      <td>Brunt Ice Shelf, Antarctica</td>
    </tr>
  </tbody>
</table>

Contextual rows

The standard contextual background classes can be used as the background of table rows using these classes:

Standard Contextual Background Table Cell Contextual Background Class
Success .bsk-success
Warning .bsk-warning
Danger .bsk-danger
Info .bsk-info

These classes only work within tables. Use the standard contextual background classes to use them in other situations.

You can also use the .bsk-active class to highlight a row as if it had focus when using the row hover styles.

Name Location
Ny-Ålesund Svalbard, High Arctic
Rothera Adelaide Island, Antarctica
Halley VI Brunt Ice Shelf, Antarctica
Bird Island Bird Island, South Georgia
Signy Factory Cove, Borge Bay, Signy Island 
<table class="bsk-table bsk-table-spacing w-full text-left">
  <thead>
    <tr>
      <th>Name</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr class="bsk-success">
      <td>Ny-Ålesund</td>
      <td>Svalbard, High Arctic</td>
    </tr>
    <tr class="bsk-warning">
      <td>Rothera</td>
      <td>Adelaide Island, Antarctica</td>
    </tr>
    <tr class="bsk-danger">
      <td>Halley VI</td>
      <td>Brunt Ice Shelf, Antarctica</td>
    </tr>
    <tr class="bsk-info">
      <td>Bird Island</td>
      <td>Bird Island, South Georgia</td>
    </tr>
    <tr class="bsk-active">
      <td>Signy</td>
      <td>Factory Cove, Borge Bay, Signy Island</td>
    </tr>
  </tbody>
</table>

Small table

Add .bsk-table-spacing-sm to reduce padding within a table to make it more compact.

Name Location
Ny-Ålesund Svalbard, High Arctic
Rothera Adelaide Island, Antarctica
Halley VI Brunt Ice Shelf, Antarctica 
<table class="bsk-table bsk-table-spacing-sm text-left">
  <thead>
    <tr>
      <th>Name</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ny-Ålesund</td>
      <td>Svalbard, High Arctic</td>
    </tr>
    <tr>
      <td>Rothera</td>
      <td>Adelaide Island, Antarctica</td>
    </tr>
    <tr>
      <td>Halley VI</td>
      <td>Brunt Ice Shelf, Antarctica</td>
    </tr>
  </tbody>
</table>

Responsive table

Wrap a table in a div with the .bsk-table-responsive class to make it scroll horizontally on smaller devices. The text here is purposefully long for this example.

Responsive tables may not be compatible with advanced mark-up such as drop-down menus and other widgets.

Name Location
Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
1914 translation by H. Rackham But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. 
<div class="bsk-table-responsive">
<table class="bsk-table bsk-table-spacing w-full text-left">
    <thead>
      <tr>
        <th>Name</th>
        <th>Location</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
      </tr>
      <tr>
        <td>Where does it come from?</td>
        <td>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</td>
      </tr>
      <tr>
        <td>1914 translation by H. Rackham</td>
        <td>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</td>
      </tr>
    </tbody>
</table>
</div>