Author: Michal Szymanski
Step 1 - table
Go to
Tables Docs and copy the code
for the Basic example. Then paste it to the
card-body within the Table Section:
<!--Card content-->
<div class="card-body">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!--/.Card content-->
The table is working out of the box, but we need more data inside. Replace the existing table with the following:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First column</th>
<th>Second column</th>
<th>Third column</th>
<th>Fourth column</th>
<th>Fifth column</th>
<th>Sixth column</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
</tbody>
</table>
The table seems to be work fine, but there is one problem.
If you resize the window of the browser you will notice that the data of the table exceeds the card and ruins the layout.
So there is a question - how to make a table with plenty of data responsive?
Actually, it's very simple. We just need to add
.table-responsive class to the parent element of the table.
Thanks to that we make a table scrollable through the X-axis, which doesn't destroy the entire layout of the page.
<!--Card content-->
<div class="card-body">
<div class="table-responsive">
<table class="table">
[...]
</table>
</div>
If you don't want a long data string within a single cell breaking the line, you can add the
.text-nowrap class to the
table element.
<table class="table text-nowrap">
Previous lesson Live preview Next lesson
Spread the word:
