Class | Result |
---|---|
.table | applies the basic styles for a table, required for use with classes below |
.table-bordered | table with border on all size |
.table-striped | table with every other row striped |
.thead-light | light table header |
.thead-dark | dark table header |
.table-primary | background-color: #0d6efd; |
.table-secondary | background-color: #6c757d; |
.table-success | background-color: #198754; |
.table-info | background-color: #0dcaf0; |
.table-warning | background-color: #ffc107; |
.table-danger | background-color: #dc3545; |
.table-light | background-color: #f8f9fa; |
.table-dark | background-color: #212529; |
<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 |
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>