<table>
<thead>
<tr>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
<th>Field 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 - Data 1</td>
<td>Row 1 - Data 2</td>
<td>Row 1 - Data 3</td>
<td>Row 1 - Data 4</td>
</tr>
<!-- .... -->
</tbody>
</table>
Field 1 | Field 2 | Field 3 | Field 4 |
---|---|---|---|
Row 1 - Data 1 | Row 1 - Data 2 | Row 1 - Data 3 | Row 1 - Data 4 |
Row 2 - Data 1 | Row 2 - Data 2 | Row 2 - Data 3 | Row 2 - Data 4 |
Row 3 - Data 1 | Row 3 - Data 2 | Row 3 - Data 3 | Row 3 - Data 4 |
Row 4 - Data 1 | Row 4 - Data 2 | Row 4 - Data 3 | Row 4 - Data 4 |
Row 5 - Data 1 | Row 5 - Data 2 | Row 5 - Data 3 | Row 5 - Data 4 |
Responsive Table
Wrap the table in a div with the table-wrapper
class, and set a min-size on the columns to make the table responsive.
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
<th>Field 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 - Data 1</td>
<td>Row 1 - Data 2</td>
<td>Row 1 - Data 3</td>
<td>Row 1 - Data 4</td>
</tr>
<!-- .... -->
</tbody>
</table>
</div>
Field 1 | Field 2 | Field 3 | Field 4 |
---|---|---|---|
Row 1 - Data 1 | Row 1 - Data 2 | Row 1 - Data 3 | Row 1 - Data 4 |
Row 2 - Data 1 | Row 2 - Data 2 | Row 2 - Data 3 | Row 2 - Data 4 |
Row 3 - Data 1 | Row 3 - Data 2 | Row 3 - Data 3 | Row 3 - Data 4 |
Row 4 - Data 1 | Row 4 - Data 2 | Row 4 - Data 3 | Row 4 - Data 4 |
Row 5 - Data 1 | Row 5 - Data 2 | Row 5 - Data 3 | Row 5 - Data 4 |