Responsive Tables

When you have a wide table and need it to be responsive just add a class tbl-responsive to the table element and add an attribute  data-title in every td in order to be used as title on small screens.


<table class=”tbl-responsive”>
<th> Full Name</th>
<td data-title=”Full Name”>John Smith</td>

Finally paste the below in your css file. You might need to change some sizes/colors according to your design/table.


Responsive Table

table.tbl-responsive td, table.tbl-responsive td a {
padding: 0 5px;

table.tbl-responsive td a:hover, table.tbl-responsive td a:focus{ color: #fff; }
@media only screen and (max-width: 800px),
only screen and (max-device-width: 800px) {
.tbl-responsive thead,
.tbl-responsive tbody,
.tbl-responsive th,
.tbl-responsive td,
.tbl-responsive tr {
display: block !important;
position: relative;

.tbl-responsive thead tr {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;

.tbl-responsive tr { border: 1px solid #ccc !important; }

.tbl-responsive td {
border: none !important;
border-bottom: 1px solid #eee !important;
position: relative !important;
padding-left: 30% !important;
white-space: normal !important;
text-align:left !important;
width: auto !important;

table.tbl-responsive td, table.tbl-responsive td a {
padding: 3px 5px;

.tbl-responsive td:hover a{
color: white !important;

.tbl-responsive td:before {
position: absolute !important;
top: 4px !important;
left: 6px !important;
width: 65% !important;
padding-right: 10px !important;
white-space: nowrap !important;
text-align:left !important;
font-weight: bold !important;


Label the data
.tbl-responsive td:before { content: attr(data-title); }

.dataTables_wrapper .form-control { width: auto !important; }
.dataTables_length { display: none; }
div.dataTables_length, div.dataTables_filter, div.dataTables_info, div.dataTables_paginate { text-align: right !important; }
@media only screen and (max-width: 450px),
only screen and (max-device-width: 450px)
.tbl-responsive td {
padding-left: 140px !important;