Tables


Tech Sheet

For fixed width formats, set each column as a percentage of the table width. The sum of the column widths must equal the table width. Table widths on mobile default to 100%.

Dark Green Header

Header 1 Header 2 Header 3 Header 4
Sub Header Title
Data Row 1 Data Data Data
Data Row 2 Data Data Data
Last Data Row Data Data Data

1x Blank Line

See pallette for complete list of background colors.

Souce Code

<h3>Dark Green Header</h3>

<table class="table-auto w-full text-sm">
   <thead>
      <tr>
         <th class="bg-green-darker text-white border-b border-r border-white">Header 1</th>
         <th class="bg-green-darker text-white border-b border-r border-white">Header 2</th>
         <th class="bg-green-darker text-white border-b border-r border-white">Header 3</th>
         <th class="bg-green-darker text-white border-b">Header 4</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="bg-tint align-center border-b border-white" colspan="4">Sub Header Title</td>
      </tr>
      <tr>
         <td class="border-b border-r border-grey-lightest">Data Row 1</td>
         <td class="border-b border-r border-grey-lightest">Data</td>
         <td class="border-b border-r border-grey-lightest">Data</td>
         <td class="border-b border-grey-lightest">Data</td>
      </tr>
      <tr>
         <td class="border-b border-r border-grey-lightest">Data Row 2</td>
         <td class="border-b border-r border-grey-lightest">Data</td>
         <td class="border-b border-r border-grey-lightest">Data</td>
         <td class="border-b border-grey-lightest">Data</td>
      </tr>
      <tr>
         <td class="border-r border-grey-lightest">Last Data Row</td>
         <td class="border-r border-grey-lightest">Data</td>
         <td class="border-r border-grey-lightest">Data</td>
         <td>Data</td>
      </tr>
   </tbody>
</table>
<p class="bl-1x">1x Blank Line</p>
<div class="icon-sm icon-deeporange-lightest fa-comment-o"><span class="text-sm text-grey pl-1">See pallette for complete list of background colors.</span></div>