"No more tables (responsive table)"
Bootstrap 3.1.0 Snippet by sergiopinnaprato

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <h1 class="text-center"> No more tables. </h1> <h3 class="text-center"> Resize the browser screen to see how the table changes </h3> </div> <div id="no-more-tables"> <table class="col-md-12 table-bordered table-striped table-condensed cf"> <thead class="cf"> <tr> <th>Code</th> <th>Company</th> <th class="numeric">Price</th> <th class="numeric">Change</th> <th class="numeric">Change %</th> <th class="numeric">Open</th> <th class="numeric">High</th> <th class="numeric">Low</th> <th class="numeric">Volume</th> </tr> </thead> <tbody> <tr> <td data-title="Code">AAC</td> <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td> <td data-title="Price" class="numeric">$1.38</td> <td data-title="Change" class="numeric">-0.01</td> <td data-title="Change %" class="numeric">-0.36%</td> <td data-title="Open" class="numeric">$1.39</td> <td data-title="High" class="numeric">$1.39</td> <td data-title="Low" class="numeric">$1.38</td> <td data-title="Volume" class="numeric">9,395</td> </tr> <tr> <td data-title="Code">AAD</td> <td data-title="Company">ARDENT LEISURE GROUP</td> <td data-title="Price" class="numeric">$1.15</td> <td data-title="Change" class="numeric">+0.02</td> <td data-title="Change %" class="numeric">1.32%</td> <td data-title="Open" class="numeric">$1.14</td> <td data-title="High" class="numeric">$1.15</td> <td data-title="Low" class="numeric">$1.13</td> <td data-title="Volume" class="numeric">56,431</td> </tr> <tr> <td data-title="Code">AAX</td> <td data-title="Company">AUSENCO LIMITED</td> <td data-title="Price" class="numeric">$4.00</td> <td data-title="Change" class="numeric">-0.04</td> <td data-title="Change %" class="numeric">-0.99%</td> <td data-title="Open" class="numeric">$4.01</td> <td data-title="High" class="numeric">$4.05</td> <td data-title="Low" class="numeric">$4.00</td> <td data-title="Volume" class="numeric">90,641</td> </tr> <tr> <td data-title="Code">ABC</td> <td data-title="Company">ADELAIDE BRIGHTON LIMITED</td> <td data-title="Price" class="numeric">$3.00</td> <td data-title="Change" class="numeric">+0.06</td> <td data-title="Change %" class="numeric">2.04%</td> <td data-title="Open" class="numeric">$2.98</td> <td data-title="High" class="numeric">$3.00</td> <td data-title="Low" class="numeric">$2.96</td> <td data-title="Volume" class="numeric">862,518</td> </tr> <tr> <td data-title="Code">ABP</td> <td data-title="Company">ABACUS PROPERTY GROUP</td> <td data-title="Price" class="numeric">$1.91</td> <td data-title="Change" class="numeric">0.00</td> <td data-title="Change %" class="numeric">0.00%</td> <td data-title="Open" class="numeric">$1.92</td> <td data-title="High" class="numeric">$1.93</td> <td data-title="Low" class="numeric">$1.90</td> <td data-title="Volume" class="numeric">595,701</td> </tr> <tr> <td data-title="Code">ABY</td> <td data-title="Company">ADITYA BIRLA MINERALS LIMITED</td> <td data-title="Price" class="numeric">$0.77</td> <td data-title="Change" class="numeric">+0.02</td> <td data-title="Change %" class="numeric">2.00%</td> <td data-title="Open" class="numeric">$0.76</td> <td data-title="High" class="numeric">$0.77</td> <td data-title="Low" class="numeric">$0.76</td> <td data-title="Volume" class="numeric">54,567</td> </tr> <tr> <td data-title="Code">ACR</td> <td data-title="Company">ACRUX LIMITED</td> <td data-title="Price" class="numeric">$3.71</td> <td data-title="Change" class="numeric">+0.01</td> <td data-title="Change %" class="numeric">0.14%</td> <td data-title="Open" class="numeric">$3.70</td> <td data-title="High" class="numeric">$3.72</td> <td data-title="Low" class="numeric">$3.68</td> <td data-title="Volume" class="numeric">191,373</td> </tr> <tr> <td data-title="Code">ADU</td> <td data-title="Company">ADAMUS RESOURCES LIMITED</td> <td data-title="Price" class="numeric">$0.72</td> <td data-title="Change" class="numeric">0.00</td> <td data-title="Change %" class="numeric">0.00%</td> <td data-title="Open" class="numeric">$0.73</td> <td data-title="High" class="numeric">$0.74</td> <td data-title="Low" class="numeric">$0.72</td> <td data-title="Volume" class="numeric">8,602,291</td> </tr> <tr> <td data-title="Code">AGG</td> <td data-title="Company">ANGLOGOLD ASHANTI LIMITED</td> <td data-title="Price" class="numeric">$7.81</td> <td data-title="Change" class="numeric">-0.22</td> <td data-title="Change %" class="numeric">-2.74%</td> <td data-title="Open" class="numeric">$7.82</td> <td data-title="High" class="numeric">$7.82</td> <td data-title="Low" class="numeric">$7.81</td> <td data-title="Volume" class="numeric">148</td> </tr> <tr> <td data-title="Code">AGK</td> <td data-title="Company">AGL ENERGY LIMITED</td> <td data-title="Price" class="numeric">$13.82</td> <td data-title="Change" class="numeric">+0.02</td> <td data-title="Change %" class="numeric">0.14%</td> <td data-title="Open" class="numeric">$13.83</td> <td data-title="High" class="numeric">$13.83</td> <td data-title="Low" class="numeric">$13.67</td> <td data-title="Volume" class="numeric">846,403</td> </tr> <tr> <td data-title="Code">AGO</td> <td data-title="Company">ATLAS IRON LIMITED</td> <td data-title="Price" class="numeric">$3.17</td> <td data-title="Change" class="numeric">-0.02</td> <td data-title="Change %" class="numeric">-0.47%</td> <td data-title="Open" class="numeric">$3.11</td> <td data-title="High" class="numeric">$3.22</td> <td data-title="Low" class="numeric">$3.10</td> <td data-title="Volume" class="numeric">5,416,303</td> </tr> </tbody> </table> </div> </div> <div class="row"> <p class="bg-success" style="padding:10px;margin-top:20px"><small><a href="http://elvery.net/demo/responsive-tables/#no-more-tables" target="_blank">Link</a> to original article</small></p> </div> </div>
@media only screen and (max-width: 800px) { /* Force table to not be like tables anymore */ #no-more-tables table, #no-more-tables thead, #no-more-tables tbody, #no-more-tables th, #no-more-tables td, #no-more-tables tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ #no-more-tables thead tr { position: absolute; top: -9999px; left: -9999px; } #no-more-tables tr { border: 1px solid #ccc; } #no-more-tables td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; white-space: normal; text-align:left; } #no-more-tables td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align:left; font-weight: bold; } /* Label the data */ #no-more-tables td:before { content: attr(data-title); } }

Related: See More

Questions / Comments:

Hello. thanks, great work.

There is an issue with iphone 6+ ,safari.

for some reason the "display:block;" setting for td element doesn't catch at that device.

any solution to this issue?

kobkob78 (-1) - 10 months ago - Reply -1

Hello I want to show only the form for mobile not another form.

How I can do?

Gmaer12 () - 1 year ago - Reply 0

check box not working in select media query

Amar () - 1 year ago - Reply 0

Thanks, works perfectly fine.


Mukhtar Ahmed () - 1 year ago - Reply 0

My issue is that I have four rows on top of one another with no headers. It includes a title of a product, the image of the product, description text, and a button that leads to the product. With this code it has successfully made everything more visible, yet the associated title, image, descriptive text and button are not aligning correctly in this view. I feel that I am getting closer to being successful with this code but am definitely not close.

Katie Corder () - 2 years ago - Reply 0

Wow ! I loved it , thank you so much :)

nihan () - 2 years ago - Reply 0

Thanks for this remarkably simple-to-implement solution to an age old problem. Much appreciated.

Brandon Cloudy Williams () - 3 years ago - Reply 0

How to create responsive table without using tr,td. I mean only by div.

plzzzz reply me

sahil980 () - 3 years ago - Reply 0

I don't understunding: in the tag table you must put td and th...

Sergio Pinna () - 2 years ago - Reply 0

Simple, elegant, efficient.
Just beautiful !

louisseb () - 3 years ago - Reply 0

how you make these tables responsive ? please reply me .

rishi verma () - 3 years ago - Reply 0

Thanks for that tutorial there is another tutorial on how to create a responsive table using css http://talkerscode.com/webt...

billy () - 3 years ago - Reply 0

Just in case someone uses Tim solution to dinamically add the data-title, look at the second line he uses $(".nmt").each(function() {

Be careful with that $(".nmt") because it's the class he is using, if you copy the css like it's in the website you need to change this to $("#no-more-tables"). In my case I am using the class .no-more-tables so I used $(".no-more-tables").

Thank you very much to both sergiopinnaprato for the full code and Tim for the additional script help.

sirmanux () - 3 years ago - Reply 0

This is not working for responsive view. Please help me to get it off.

Ali () - 3 years ago - Reply 0

hey this thing is not working for me.. my bootstrap version is v3.1.0 ..

Rahul Ramakrishnan () - 3 years ago - Reply 0

Yes Same problem here...

Ali () - 3 years ago - Reply 0

its working. Check for any other styles you have added with the table.. that might be reason its not working for you.

Rahul Ramakrishnan () - 3 years ago - Reply 0

I had only copy & paste css & nothing else but still not working

Ali () - 3 years ago - Reply 0

Wow Great Man

Monkey D Luffy () - 3 years ago - Reply 0

Also one more note : in my case when in cell there are no text (is empty) then on small devices rows are driven on each other. I add this css `.no-more-tables td::after {
content: "\00a0"; }` which help me

Roman Chyzh () - 3 years ago - Reply 0

How to make it work with IE ?

Roman Chyzh () - 3 years ago - Reply 0

Wow, that's great! Thank you! Saved me a lot of time!

Barbara Dolleschal () - 3 years ago - Reply 0

Has anyone else ran into issues with running this code in IE? The table cells are overwriting each other, and makes the table contents unreadable.

Sharon Hubbell () - 3 years ago - Reply 0

My advise on this is to ask yourself and management why you need to support that old browsers. A ordinary end user does not turn off the automatic update function in the browser. A lot of companies are stuck with old browsers because of there internal sucky systems. If this is the case you should ask them how they could live with that security risk of using old browsers. Anyway IE is abandoned by microsoft. They have a new browser now thats called EDGE. https://en.wikipedia.org/wi...

Jens Alenius () - 3 years ago - Reply 0

yes, i also have this issue (IE 8-9)

Roman Chyzh () - 3 years ago - Reply 0

Check my reply

Jens Alenius () - 3 years ago - Reply 0

To make this work with a class instead of an ID just replace the #no-more-tables with .no-more-tables and add !important to:

.no-more-tables td {
padding-left: 50% !important;

Patabugen () - 3 years ago - Reply 0

Thank you so much !!!

Adjie Indrawan () - 3 years ago - Reply 0

Dynamically add the data-title attributes:

$(document).ready(function () {
$(".nmt").each(function() {
var nmtTable = $(this);
var nmtHeadRow = nmtTable.find("thead tr");
nmtTable.find("tbody tr").each(function () {
var curRow = $(this);
for (var i = 0; i < curRow.find("td").length; i++) {
var rowSelector = "td:eq(" + i + ")";
var headSelector = "th:eq(" + i + ")";
curRow.find(rowSelector).attr('data-title', nmtHeadRow.find(headSelector).html());


Tim () - 3 years ago - Reply 0

gj. works perfectly fine.

İlhami Yılmaz () - 2 years ago - Reply 0

Hey Tim, where do I have to add this lines of code? Template.js?

Steffen Retz () - 3 years ago - Reply 0

Works great, thanks Sergio!

Ñe () - 4 years ago - Reply 0

it is very nice, very usefull

David Costa () - 4 years ago - Reply 0

Is there any chance to make labels to wrap? Because now the longer text do not wrap and goes under the other text.

Martynas Martulis () - 4 years ago - Reply 0

But... it is still a < table >. O.o

YaMama () - 4 years ago - Reply 0

how i add a scrollbar. i dont want to show all data cuz is a big table

ramlok () - 4 years ago - Reply 0

this is great! now i have to find a way to implement it with dataTables.Thanks dude!

Mariano () - 4 years ago - Reply 0

Wow! Very cool. Props to sergiopinnaprato. I wish I knew this solution earlier. I may eventually re-factor.

Melvin Gruesbeck () - 4 years ago - Reply 0

how do i center it on my page? it's aligned to the left and i can't figure out in css or html.

willow () - 4 years ago - Reply 0

Wow, this is neat.

Josh () - 4 years ago - Reply 0