Getting Started
Layout
Components
Design
Table
Null Table is a set of classes that provide a simple and easy-to-use interface for working with table. It will look like a card on tablet and mobile screen.
data-null-label should be the same as your table th .This will appear when the screen adjust itself to mobile and tablet sizes.
| Serial Number | First Name | Middle Name | Last Name |
|---|---|---|---|
| 1 | Jack | Wiliam | Albeo |
| 2 | Liam | Noah | Oliver |
| 3 | Elijah | William | James |
| 4 | Benjamin | Lucas | Owen |
<table class="null-table">
<thead>
<tr>
<th>Serial Number</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
</tr>
</thead><!--End thead-->
<tbody>
<tr>
<td data-null-label = "Serial Number">1</td>
<td data-null-label = "First Name">Jack</td>
<td data-null-label = "Middle Name">Wiliam</td>
<td data-null-label = "Last Name">Albeo</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">2</td>
<td data-null-label = "First Name">Liam</td>
<td data-null-label = "Middle Name">Noah</td>
<td data-null-label = "Last Name">Oliver</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">3</td>
<td data-null-label = "First Name">Elijah</td>
<td data-null-label = "Middle Name">William</td>
<td data-null-label = "Last Name">James</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">4</td>
<td data-null-label = "First Name">Benjamin</td>
<td data-null-label = "Middle Name">Lucas</td>
<td data-null-label = "Last Name">Owen </td>
</tr><!--End tr-->
</tbody><!--End tbody-->
</table><!--End null-table-->
Add the class ".null-table-header" to the thead element if you want to have a colored header.
| Serial Number | First Name | Middle Name | Last Name |
|---|---|---|---|
| 1 | Jack | Wiliam | Albeo |
| 2 | Liam | Noah | Oliver |
| 3 | Elijah | William | James |
| 4 | Benjamin | Lucas | Owen |
<table class="null-table">
<thead class="null-table-header">
<tr>
<th>Serial Number</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
</tr>
</thead><!--End thead-->
<tbody>
<tr>
<td data-null-label = "Serial Number">1</td>
<td data-null-label = "First Name">Jack</td>
<td data-null-label = "Middle Name">Wiliam</td>
<td data-null-label = "Last Name">Albeo</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">2</td>
<td data-null-label = "First Name">Liam</td>
<td data-null-label = "Middle Name">Noah</td>
<td data-null-label = "Last Name">Oliver</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">3</td>
<td data-null-label = "First Name">Elijah</td>
<td data-null-label = "Middle Name">William</td>
<td data-null-label = "Last Name">James</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">4</td>
<td data-null-label = "First Name">Benjamin</td>
<td data-null-label = "Middle Name">Lucas</td>
<td data-null-label = "Last Name">Owen </td>
</tr><!--End tr-->
</tbody><!--End tbody-->
</table><!--End null-table-->Add the class ".null-table-header-border-none" to the thead element if you want to remove the border:
| Serial Number | First Name | Middle Name | Last Name |
|---|---|---|---|
| 1 | Jack | Wiliam | Albeo |
| 2 | Liam | Noah | Oliver |
| 3 | Elijah | William | James |
| 4 | Benjamin | Lucas | Owen |
<table class="null-table">
<thead class="null-table-header null-table-header-border-none">
<tr>
<th>Serial Number</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
</tr>
</thead><!--End thead-->
<tbody>
<tr>
<td data-null-label = "Serial Number">1</td>
<td data-null-label = "First Name">Jack</td>
<td data-null-label = "Middle Name">Wiliam</td>
<td data-null-label = "Last Name">Albeo</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">2</td>
<td data-null-label = "First Name">Liam</td>
<td data-null-label = "Middle Name">Noah</td>
<td data-null-label = "Last Name">Oliver</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">3</td>
<td data-null-label = "First Name">Elijah</td>
<td data-null-label = "Middle Name">William</td>
<td data-null-label = "Last Name">James</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">4</td>
<td data-null-label = "First Name">Benjamin</td>
<td data-null-label = "Middle Name">Lucas</td>
<td data-null-label = "Last Name">Owen </td>
</tr><!--End tr-->
</tbody><!--End tbody-->
</table><!--End null-table-->Add the class ".null-table-zebra-stripes" to the table element if you want to have zebra stripes design:
| Serial Number | First Name | Middle Name | Last Name |
|---|---|---|---|
| 1 | Jack | Wiliam | Albeo |
| 2 | Liam | Noah | Oliver |
| 3 | Elijah | William | James |
| 4 | Benjamin | Lucas | Owen |
<table class="null-table null-table-zebra-stripes">
<thead>
<tr>
<th>Serial Number</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
</tr>
</thead><!--End thead-->
<tbody>
<tr>
<td data-null-label = "Serial Number">1</td>
<td data-null-label = "First Name">Jack</td>
<td data-null-label = "Middle Name">Wiliam</td>
<td data-null-label = "Last Name">Albeo</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">2</td>
<td data-null-label = "First Name">Liam</td>
<td data-null-label = "Middle Name">Noah</td>
<td data-null-label = "Last Name">Oliver</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">3</td>
<td data-null-label = "First Name">Elijah</td>
<td data-null-label = "Middle Name">William</td>
<td data-null-label = "Last Name">James</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">4</td>
<td data-null-label = "First Name">Benjamin</td>
<td data-null-label = "Middle Name">Lucas</td>
<td data-null-label = "Last Name">Owen </td>
</tr><!--End tr-->
</tbody><!--End tbody-->
</table><!--End null-table-->Add class ".null-table-zebra-stripes-columns" to the table element if you want to have zebra stripes as columns:
| Serial Number | First Name | Middle Name | Last Name |
|---|---|---|---|
| 1 | Jack | Wiliam | Albeo |
| 2 | Liam | Noah | Oliver |
| 3 | Elijah | William | James |
| 4 | Benjamin | Lucas | Owen |
<table class="null-table null-table-zebra-stripes-columns">
<thead>
<tr>
<th>Serial Number</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
</tr>
</thead><!--End thead-->
<tbody>
<tr>
<td data-null-label = "Serial Number">1</td>
<td data-null-label = "First Name">Jack</td>
<td data-null-label = "Middle Name">Wiliam</td>
<td data-null-label = "Last Name">Albeo</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">2</td>
<td data-null-label = "First Name">Liam</td>
<td data-null-label = "Middle Name">Noah</td>
<td data-null-label = "Last Name">Oliver</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">3</td>
<td data-null-label = "First Name">Elijah</td>
<td data-null-label = "Middle Name">William</td>
<td data-null-label = "Last Name">James</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">4</td>
<td data-null-label = "First Name">Benjamin</td>
<td data-null-label = "Middle Name">Lucas</td>
<td data-null-label = "Last Name">Owen </td>
</tr><!--End tr-->
</tbody><!--End tbody-->
</table><!--End null-table-->Add the class ".null-table-border-radius" to the table element if you want to have border radius:
| Serial Number | First Name | Middle Name | Last Name |
|---|---|---|---|
| 1 | Jack | Wiliam | Albeo |
| 2 | Liam | Noah | Oliver |
| 3 | Elijah | William | James |
| 4 | Benjamin | Lucas | Owen |
<table class="null-table null-table-zebra-stripes null-table-border-radius">
<thead>
<tr>
<th>Serial Number</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
</tr>
</thead><!--End thead-->
<tbody>
<tr>
<td data-null-label = "Serial Number">1</td>
<td data-null-label = "First Name">Jack</td>
<td data-null-label = "Middle Name">Wiliam</td>
<td data-null-label = "Last Name">Albeo</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">2</td>
<td data-null-label = "First Name">Liam</td>
<td data-null-label = "Middle Name">Noah</td>
<td data-null-label = "Last Name">Oliver</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">3</td>
<td data-null-label = "First Name">Elijah</td>
<td data-null-label = "Middle Name">William</td>
<td data-null-label = "Last Name">James</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">4</td>
<td data-null-label = "First Name">Benjamin</td>
<td data-null-label = "Middle Name">Lucas</td>
<td data-null-label = "Last Name">Owen </td>
</tr><!--End tr-->
</tbody><!--End tbody-->
</table><!--End null-table-->Want to have custom width for your th? you can easily do this, just create a class .null-table-th-width-[width in px] , this class should be located under @media(min-width:992px){}
| Serial Number | First Name | Middle Name | Last Name |
|---|---|---|---|
| 1 | Jack | Wiliam | Albeo |
| 2 | Liam | Noah | Oliver |
| 3 | Elijah | William | James |
| 4 | Benjamin | Lucas | Owen |
<table class="null-table null-table-zebra-stripes">
<thead>
<tr>
<th class="null-table-th-width-155">Serial Number</th>
<th class="null-table-th-width-120">First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
</tr>
</thead><!--End thead-->
<tbody>
<tr>
<td data-null-label = "Serial Number">1</td>
<td data-null-label = "First Name">Jack</td>
<td data-null-label = "Middle Name">Wiliam</td>
<td data-null-label = "Last Name">Albeo</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">2</td>
<td data-null-label = "First Name">Liam</td>
<td data-null-label = "Middle Name">Noah</td>
<td data-null-label = "Last Name">Oliver</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">3</td>
<td data-null-label = "First Name">Elijah</td>
<td data-null-label = "Middle Name">William</td>
<td data-null-label = "Last Name">James</td>
</tr><!--End tr-->
<tr>
<td data-null-label = "Serial Number">4</td>
<td data-null-label = "First Name">Benjamin</td>
<td data-null-label = "Middle Name">Lucas</td>
<td data-null-label = "Last Name">Owen </td>
</tr><!--End tr-->
</tbody><!--End tbody-->
</table><!--End null-table-->CSS Variables:
Variable Name: --null-table-header-background
Variable Value: var(--null-color-main)
Variable Name: --null-table-header-color
Variable Value: var(--null-color-white)
Variable Name: --null-table-zebra-stripes-background
Variable Value: var(--null-color-light-grey)
Variable Name: --null-table-border-color
Variable Value: #ececec
Variable Name: --null-table-border-radius
Variable Value: var(--null-border-radius)