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

<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); } }

Similar snippets: See More


Comments:

Josh 2014-03-01 16:55:02
    Wow, this is neat.
willow 2014-03-08 00:16:55
    how do i center it on my page? it's aligned to the left and i can't figure out in css or html.
Melvin Gruesbeck 2014-03-08 04:24:10
    Wow! Very cool. Props to sergiopinnaprato. I wish I knew this solution earlier. I may eventually re-factor.
Mariano 2014-03-20 18:29:16
    this is great! now i have to find a way to implement it with dataTables.Thanks dude!
ramlok 2014-08-02 23:03:20
    how i add a scrollbar. i dont want to show all data cuz is a big table
YaMama 2014-08-21 16:30:45
    But... it is still a < table >. O.o
Martynas Martulis 2014-08-25 13:21:22
    Is there any chance to make labels to wrap? Because now the longer text do not wrap and goes under the other text.
David Costa 2014-10-28 13:23:48
    it is very nice, very usefull
Ñe 2014-12-06 19:55:51
    Works great, thanks Sergio!
Tim 2014-12-29 19:44:54
    Dynamically add the data-title attributes:
Steffen Retz 2015-10-01 10:13:33
    Hey Tim, where do I have to add this lines of code? Template.js?
İlhami Yılmaz 2016-02-24 08:53:19
    gj. works perfectly fine.
Patabugen 2015-01-03 13:31:14
    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:
Adjie Indrawan 2015-03-14 02:40:08
    Thank you so much !!!
Sharon Hubbell 2015-01-23 20:18:07
    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.
Roman Chyzh 2015-03-03 17:18:06
    yes, i also have this issue (IE 8-9)
Jens Alenius 2015-10-23 08:45:14
    Check my reply
Jens Alenius 2015-10-23 08:30:55
    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...
Barbara Dolleschal 2015-02-20 22:08:20
    Wow, that's great! Thank you! Saved me a lot of time!
Roman Chyzh 2015-03-03 16:46:25
    How to make it work with IE ?
Roman Chyzh 2015-03-03 16:49:29
    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
Monkey D Luffy 2015-03-11 07:45:59
    Wow Great Man
Rahul Ramakrishnan 2015-03-13 05:29:31
    hey this thing is not working for me.. my bootstrap version is v3.1.0 ..
Ali 2015-04-28 07:25:48
    Yes Same problem here...
Rahul Ramakrishnan 2015-04-28 07:29:37
    its working. Check for any other styles you have added with the table.. that might be reason its not working for you.
Ali 2015-04-28 16:36:11
    I had only copy & paste css & nothing else but still not working
Ali 2015-04-28 06:19:12
    This is not working for responsive view. Please help me to get it off.
sirmanux 2015-07-01 16:45:08
    Just in case someone uses Tim solution to dinamically add the data-title, look at the second line he uses $(".nmt").each(function() {
billy 2015-08-04 09:18:52
    Thanks for that tutorial there is another tutorial on how to create a responsive table using css http://talkerscode.com/webt...
rishi verma 2015-09-30 13:17:41
    how you make these tables responsive ? please reply me .
louisseb 2015-10-28 09:11:22
    Simple, elegant, efficient.
Just beautiful !
sahil980 2015-11-06 15:17:29
    How to create responsive table without using tr,td. I mean only by div.
Sergio Pinna 2016-03-24 15:25:17
    I don't understunding: in the tag table you must put td and th...
Brandon Cloudy Williams 2015-11-09 08:50:24
    Thanks for this remarkably simple-to-implement solution to an age old problem. Much appreciated.
nihan 2016-01-12 15:24:24
    Wow ! I loved it , thank you so much :)
Katie Corder 2016-07-07 22:13:23
    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.
Mukhtar Ahmed 2017-01-05 10:08:27
    Thanks, works perfectly fine.
Amar 2017-01-30 07:42:06
    check box not working in select media query
Gmaer12 2017-07-02 19:17:05
    Hello I want to show only the form for mobile not another form.

Commenting will be back soon.