Table

Layout data in a tabular view.

Class Result
.tableapplies the basic styles for a table, required for use with classes below
.table-borderedtable with border on all size
.table-stripedtable with every other row striped
.thead-lightlight table header
.thead-darkdark table header
.table-primarybackground-color: #0d6efd;
.table-secondarybackground-color: #6c757d;
.table-successbackground-color: #198754;
.table-infobackground-color: #0dcaf0;
.table-warningbackground-color: #ffc107;
.table-dangerbackground-color: #dc3545;
.table-lightbackground-color: #f8f9fa;
.table-darkbackground-color: #212529;

Usage

<table class="table table-striped thead-default table-bordered">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Col Data 1</td>
      <td>Col Data 2</td>
      <td>Col Data 3</td>
      <td>Col Data 4</td>
    </tr>
    <tr>
      <td>Col Data 1</td>
      <td>Col Data 2</td>
      <td>Col Data 3</td>
      <td>Col Data 4</td>
    </tr>
    <tr class="table-success">
      <td>Col Data 1</td>
      <td>Col Data 2</td>
      <td>Col Data 3</td>
      <td>Col Data 4</td>
    </tr>
    <tr>
      <td>Col Data 1</td>
      <td>Col Data 2</td>
      <td>Col Data 3</td>
      <td>Col Data 4</td>
    </tr>
  </tbody>
</table>
Col 1 Col 2 Col 3 Col 4
Col Data 1 Col Data 2 Col Data 3 Col Data 4
Col Data 1 Col Data 2 Col Data 3 Col Data 4
Col Data 1 Col Data 2 Col Data 3 Col Data 4
Col Data 1 Col Data 2 Col Data 3 Col Data 4

Compiled Example

Input

<table class="table table-striped thead-default table-bordered">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Col Data 1</td>
      <td>Col Data 2</td>
      <td>Col Data 3</td>
      <td>Col Data 4</td>
    </tr>
    <tr>
      <td>Col Data 1</td>
      <td>Col Data 2</td>
      <td>Col Data 3</td>
      <td>Col Data 4</td>
    </tr>
    <tr class="table-success">
      <td>Col Data 1</td>
      <td>Col Data 2</td>
      <td>Col Data 3</td>
      <td>Col Data 4</td>
    </tr>
    <tr>
      <td>Col Data 1</td>
      <td>Col Data 2</td>
      <td>Col Data 3</td>
      <td>Col Data 4</td>
    </tr>
  </tbody>
</table>

Output

<table class="table table-striped thead-default table-bordered" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 100%; border: 1px solid #e2e8f0;">
  <thead>
    <tr>
      <th style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border-color: #e2e8f0; border-style: solid; border-width: 1px 1px 2px;" align="left" valign="top">Col 1</th>
      <th style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border-color: #e2e8f0; border-style: solid; border-width: 1px 1px 2px;" align="left" valign="top">Col 2</th>
      <th style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border-color: #e2e8f0; border-style: solid; border-width: 1px 1px 2px;" align="left" valign="top">Col 3</th>
      <th style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border-color: #e2e8f0; border-style: solid; border-width: 1px 1px 2px;" align="left" valign="top">Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr style="" bgcolor="#f2f2f2">
      <td style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border: 1px solid #e2e8f0;" align="left" valign="top">Col Data 1</td>
      <td style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border: 1px solid #e2e8f0;" align="left" valign="top">Col Data 2</td>
      <td style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border: 1px solid #e2e8f0;" align="left" valign="top">Col Data 3</td>
      <td style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border: 1px solid #e2e8f0;" align="left" valign="top">Col Data 4</td>
    </tr>
    <tr>
      <td style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border: 1px solid #e2e8f0;" align="left" valign="top">Col Data 1</td>
      <td style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border: 1px solid #e2e8f0;" align="left" valign="top">Col Data 2</td>
      <td style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border: 1px solid #e2e8f0;" align="left" valign="top">Col Data 3</td>
      <td style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border: 1px solid #e2e8f0;" align="left" valign="top">Col Data 4</td>
    </tr>
    <tr class="table-success" style="" bgcolor="#f2f2f2">
      <td style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border: 1px solid #e2e8f0;" align="left" bgcolor="#84e8ba" valign="top">Col Data 1</td>
      <td style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border: 1px solid #e2e8f0;" align="left" bgcolor="#84e8ba" valign="top">Col Data 2</td>
      <td style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border: 1px solid #e2e8f0;" align="left" bgcolor="#84e8ba" valign="top">Col Data 3</td>
      <td style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border: 1px solid #e2e8f0;" align="left" bgcolor="#84e8ba" valign="top">Col Data 4</td>
    </tr>
    <tr>
      <td style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border: 1px solid #e2e8f0;" align="left" valign="top">Col Data 1</td>
      <td style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border: 1px solid #e2e8f0;" align="left" valign="top">Col Data 2</td>
      <td style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border: 1px solid #e2e8f0;" align="left" valign="top">Col Data 3</td>
      <td style="line-height: 24px; font-size: 16px; margin: 0; padding: 12px; border: 1px solid #e2e8f0;" align="left" valign="top">Col Data 4</td>
    </tr>
  </tbody>
</table>
On this page