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.

Example:

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

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) {
table.tbl-responsive,
.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;
}
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s