Admin dashboard – lesson 7


Step 1 - table

Go to Content / Tables documentation and copy the code of 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 exisitng 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 the data of the table exceeds the card and ruin 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 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 that long data string within the single cell breaks the line, you can add .th-lg class to the <th> element. It sets a min-width: 9 rem to the column, and thanks to that a long string doesn't break the line.


<thead>
    <tr>
        <th>#</th>
        <th class="th-lg">First column</th>
        <th class="th-lg">Second column</th>
        <th class="th-lg">Third column</th>
        <th class="th-lg">Fourth column</th>
        <th class="th-lg">Fifth column</th>
        <th class="th-lg">Sixth column</th>
    </tr>
</thead>

Previous lesson Download Live preview Next lesson

Spread the word:
Do you need help?: Use our support forum

About author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits