Table

Default

Preview

Code

HTML

Code

JSX/TSX

Type	Where	Description	Amount
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

<div class="overflow-scroll">
	<table class="table success">
		<thead>
			<tr>
				<th>Type</th>
				<th>Where</th>
				<th>Description</th>
				<th>Amount</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td>Cy Ganderton</td>
				<td>Quality Control Specialist</td>
				<td>Blue</td>
			</tr>
			<tr>
				<th>2</th>
				<td>Hart Hagerty</td>
				<td>Desktop Support Technician</td>
				<td>Purple</td>
			</tr>
			<tr>
				<th>3</th>
				<td>Brice Swyre</td>
				<td>Tax Accountant</td>
				<td>Red</td>
			</tr>
		</tbody>
	</table>
</div>

<div className='overflow-scroll'>
  <table className='table success'>
    <thead>
      <tr>
        <th>
          Type
        </th>
        <th>
          Where
        </th>
        <th>
          Description
        </th>
        <th>
          Amount
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          1
        </th>
        <td>
          Cy Ganderton
        </td>
        <td>
          Quality Control Specialist
        </td>
        <td>
          Blue
        </td>
      </tr>
      <tr>
        <th>
          2
        </th>
        <td>
          Hart Hagerty
        </td>
        <td>
          Desktop Support Technician
        </td>
        <td>
          Purple
        </td>
      </tr>
      <tr>
        <th>
          3
        </th>
        <td>
          Brice Swyre
        </td>
        <td>
          Tax Accountant
        </td>
        <td>
          Red
        </td>
      </tr>
    </tbody>
  </table>
</div>

Zebra

Preview

Code

HTML

Code

JSX/TSX

Type	Where	Description	Amount
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

<div class="overflow-scroll">
	<table class="table zebra warn">
		<thead>
			<tr>
				<th>Type</th>
				<th>Where</th>
				<th>Description</th>
				<th>Amount</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td>Cy Ganderton</td>
				<td>Quality Control Specialist</td>
				<td>Blue</td>
			</tr>
			<tr>
				<th>2</th>
				<td>Hart Hagerty</td>
				<td>Desktop Support Technician</td>
				<td>Purple</td>
			</tr>
			<tr>
				<th>3</th>
				<td>Brice Swyre</td>
				<td>Tax Accountant</td>
				<td>Red</td>
			</tr>
		</tbody>
	</table>
</div>

<div className='overflow-scroll'>
  <table className='table zebra warn'>
    <thead>
      <tr>
        <th>
          Type
        </th>
        <th>
          Where
        </th>
        <th>
          Description
        </th>
        <th>
          Amount
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          1
        </th>
        <td>
          Cy Ganderton
        </td>
        <td>
          Quality Control Specialist
        </td>
        <td>
          Blue
        </td>
      </tr>
      <tr>
        <th>
          2
        </th>
        <td>
          Hart Hagerty
        </td>
        <td>
          Desktop Support Technician
        </td>
        <td>
          Purple
        </td>
      </tr>
      <tr>
        <th>
          3
        </th>
        <td>
          Brice Swyre
        </td>
        <td>
          Tax Accountant
        </td>
        <td>
          Red
        </td>
      </tr>
    </tbody>
  </table>
</div>

Compact

Preview

Code

HTML

Code

JSX/TSX

Type	Where	Description	Amount
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

<div class="overflow-scroll">
	<table class="table compact danger">
		<thead>
			<tr>
				<th>Type</th>
				<th>Where</th>
				<th>Description</th>
				<th>Amount</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td>Cy Ganderton</td>
				<td>Quality Control Specialist</td>
				<td>Blue</td>
			</tr>
			<tr>
				<th>2</th>
				<td>Hart Hagerty</td>
				<td>Desktop Support Technician</td>
				<td>Purple</td>
			</tr>
			<tr>
				<th>3</th>
				<td>Brice Swyre</td>
				<td>Tax Accountant</td>
				<td>Red</td>
			</tr>
		</tbody>
	</table>
</div>

<div className='overflow-scroll'>
  <table className='table compact danger'>
    <thead>
      <tr>
        <th>
          Type
        </th>
        <th>
          Where
        </th>
        <th>
          Description
        </th>
        <th>
          Amount
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          1
        </th>
        <td>
          Cy Ganderton
        </td>
        <td>
          Quality Control Specialist
        </td>
        <td>
          Blue
        </td>
      </tr>
      <tr>
        <th>
          2
        </th>
        <td>
          Hart Hagerty
        </td>
        <td>
          Desktop Support Technician
        </td>
        <td>
          Purple
        </td>
      </tr>
      <tr>
        <th>
          3
        </th>
        <td>
          Brice Swyre
        </td>
        <td>
          Tax Accountant
        </td>
        <td>
          Red
        </td>
      </tr>
    </tbody>
  </table>
</div>

Switch Tabs