LiteAdminmenu

account_circle
John Doe


grid_onTable

Responsive tables

To make a table look nice, add the class table to it. If you want that table to be responsive (scroll horizontally on smaller screens), create a <div class="table"> wrapping the table instead.

The example bellow is a responsive table. Resize your browser to and see it scrolling!


Name Phone Email User Address  
John Doe (12) 1234-1234 john.doe@email.com johndoe Street Test, City Testland, TS, US delete
John Doe (12) 1234-1234 john.doe@email.com johndoe Street Test, City Testland, TS, US delete
John Doe (12) 1234-1234 john.doe@email.com johndoe Street Test, City Testland, TS, US delete


Row counter

You can easily append the number of rows in the tbody by using the row-counter class inside the table:


# This row isn't included in the counter because it's in the thead
A tbody row
A tbody row
A tbody row
A tbody row
Total rows in the tbody:


Table caption

Add a caption element right inside of your table if you need it.

If you want your caption to be added to the bottom of the table, add the class table-caption-bottom to the caption element.


Features of this project
Feature Percentage
Niceness 100%
Cross browser consistence 99.99999%
CSS 100%
JS -0%
Result A cool project
Features of this project
Feature Percentage
Niceness 100%
Cross browser consistence 99.99999%
CSS 100%
JS -0%
Result A cool project


Condensed/comfortable table

You can set your tables to look more condensed or comfortable. Just add the class table-condensed or table-comfortable to it.


Condensed table
Lorem ipsum dolor sit amet
consectetur adipiscing elit
Duis justo nibh faucibus vel nunc ac
aliquam rutrum magna lorem
Mauris pharetra nulla a convallis ultricies
Default table
Lorem ipsum dolor sit amet
consectetur adipiscing elit
Duis justo nibh faucibus vel nunc ac
aliquam rutrum magna lorem
Mauris pharetra nulla a convallis ultricies
Comfortable table
Lorem ipsum dolor sit amet
consectetur adipiscing elit
Duis justo nibh faucibus vel nunc ac
aliquam rutrum magna lorem
Mauris pharetra nulla a convallis ultricies