[转]Responsive Tables Demo

本文转自：http://elvery.net/demo/responsive-tables/

A quick and dirty look at some techniques for designing responsive table layouts. This was put together in haste (and with the aid of Twitter Bootstrap) for What Do You Know Brisbane hosted by Web Directions.

I work for a really great little web design agency in Brisbane, and you should say hello.

The Unseen Column

This technique, first described by Stuart Curry (@irishstu) involves simply hiding less important columns on smaller screen sizes.

Example

Code	Company	Price	Change	Change %	Open	High	Low	Volume
AAC	AUSTRALIAN AGRICULTURAL COMPANY LIMITED.	$1.38	-0.01	-0.36%	$1.39	$1.39	$1.38	9,395
AAD	ARDENT LEISURE GROUP	$1.15	+0.02	1.32%	$1.14	$1.15	$1.13	56,431
AAX	AUSENCO LIMITED	$4.00	-0.04	-0.99%	$4.01	$4.05	$4.00	90,641
ABC	ADELAIDE BRIGHTON LIMITED	$3.00	+0.06	2.04%	$2.98	$3.00	$2.96	862,518
ABP	ABACUS PROPERTY GROUP	$1.91	0.00	0.00%	$1.92	$1.93	$1.90	595,701
ABY	ADITYA BIRLA MINERALS LIMITED	$0.77	+0.02	2.00%	$0.76	$0.77	$0.76	54,567
ACR	ACRUX LIMITED	$3.71	+0.01	0.14%	$3.70	$3.72	$3.68	191,373
ADU	ADAMUS RESOURCES LIMITED	$0.72	0.00	0.00%	$0.73	$0.74	$0.72	8,602,291
AGG	ANGLOGOLD ASHANTI LIMITED	$7.81	-0.22	-2.74%	$7.82	$7.82	$7.81	148
AGK	AGL ENERGY LIMITED	$13.82	+0.02	0.14%	$13.83	$13.83	$13.67	846,403
AGO	ATLAS IRON LIMITED	$3.17	-0.02	-0.47%	$3.11	$3.22	$3.10	5,416,303

Code

The approach I've presented here assumes you know the index of the columns to be hidden. This probably isn't always appropriate, and isn't all that semantic. Another option is to give the <th> and <td> classes based on importance level and code your CSS accordingly.

• HTML
• CSS

1. <table>
2. <thead>
3. <tr>
4. <th>Code</th>
5. <th>Company</th>
6. <th class="numeric">Price</th>
7. <th class="numeric">Change</th>
8. <th class="numeric">Change %</th>
9. <th class="numeric">Open</th>
10. <th class="numeric">High</th>
11. <th class="numeric">Low</th>
12. <th class="numeric">Volume</th>
13. </tr>
14. </thead>
15. <tbody>
16. <tr>
17. <td>AAC</td>
18. <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
19. <td class="numeric">$1.38</td>
20. <td class="numeric">-0.01</td>
21. <td class="numeric">-0.36%</td>
22. <td class="numeric">$1.39</td>
23. <td class="numeric">$1.39</td>
24. <td class="numeric">$1.38</td>
25. <td class="numeric">9,395</td>
26. </tr>
27. </tbody>
28. </table>

1. @media only screen and (max-width: 800px) {
2. #unseen table td:nth-child(2),
3. #unseen table th:nth-child(2) {display: none;}
4. }
5.  
6. @media only screen and (max-width: 640px) {
7. #unseen table td:nth-child(4),
8. #unseen table th:nth-child(4),
9. #unseen table td:nth-child(7),
10. #unseen table th:nth-child(7),
11. #unseen table td:nth-child(8),
12. #unseen table th:nth-child(8){display: none;}
13. }

Flip Scroll

This technique was first published by David Bushell (@dbushell). For the full low down on this technique visit his post on the technique, Responsive Tables (2). While you're there, it's also worth checking out his responsive calendar proof of concept.

Example

Code	Company	Price	Change	Change %	Open	High	Low	Volume
AAC	AUSTRALIAN AGRICULTURAL COMPANY LIMITED.	$1.38	-0.01	-0.36%	$1.39	$1.39	$1.38	9,395
AAD	ARDENT LEISURE GROUP	$1.15	+0.02	1.32%	$1.14	$1.15	$1.13	56,431
AAX	AUSENCO LIMITED	$4.00	-0.04	-0.99%	$4.01	$4.05	$4.00	90,641
ABC	ADELAIDE BRIGHTON LIMITED	$3.00	+0.06	2.04%	$2.98	$3.00	$2.96	862,518
ABP	ABACUS PROPERTY GROUP	$1.91	0.00	0.00%	$1.92	$1.93	$1.90	595,701
ABY	ADITYA BIRLA MINERALS LIMITED	$0.77	+0.02	2.00%	$0.76	$0.77	$0.76	54,567
ACR	ACRUX LIMITED	$3.71	+0.01	0.14%	$3.70	$3.72	$3.68	191,373
ADU	ADAMUS RESOURCES LIMITED	$0.72	0.00	0.00%	$0.73	$0.74	$0.72	8,602,291
AGG	ANGLOGOLD ASHANTI LIMITED	$7.81	-0.22	-2.74%	$7.82	$7.82	$7.81	148
AGK	AGL ENERGY LIMITED	$13.82	+0.02	0.14%	$13.83	$13.83	$13.67	846,403
AGO	ATLAS IRON LIMITED	$3.17	-0.02	-0.47%	$3.11	$3.22	$3.10	5,416,303

Code

The biggest trick to getting this working is to use display: inline-block; on the table rows and white-space: nowrap; on the table body. You'll also need to make use of your favourite float clearing method.

• HTML
• CSS

1. <table>
2. <thead>
3. <tr>
4. <th>Code</th>
5. <th>Company</th>
6. <th class="numeric">Price</th>
7. <th class="numeric">Change</th>
8. <th class="numeric">Change %</th>
9. <th class="numeric">Open</th>
10. <th class="numeric">High</th>
11. <th class="numeric">Low</th>
12. <th class="numeric">Volume</th>
13. </tr>
14. </thead>
15. <tbody>
16. <tr>
17. <td>AAC</td>
18. <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
19. <td class="numeric">$1.38</td>
20. <td class="numeric">-0.01</td>
21. <td class="numeric">-0.36%</td>
22. <td class="numeric">$1.39</td>
23. <td class="numeric">$1.39</td>
24. <td class="numeric">$1.38</td>
25. <td class="numeric">9,395</td>
26. </tr>
27. </tbody>
28. </table>

1.  
2. @media only screen and (max-width: 800px) {
4. #flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
5. #flip-scroll * html .cf { zoom: 1; }
6. #flip-scroll *:first-child+html .cf { zoom: 1; }
8. #flip-scroll table { 100%; border-collapse: collapse; border-spacing: 0; }
9.  
10. #flip-scroll th,
11. #flip-scroll td { margin: 0; vertical-align: top; }
12. #flip-scroll th { text-align: left; }
14. #flip-scroll table { display: block; position: relative; 100%; }
15. #flip-scroll thead { display: block; float: left; }
16. #flip-scroll tbody { display: block; auto; position: relative; overflow-x: auto; white-space: nowrap; }
17. #flip-scroll thead tr { display: block; }
18. #flip-scroll th { display: block; text-align: right; }
19. #flip-scroll tbody tr { display: inline-block; vertical-align: top; }
20. #flip-scroll td { display: block; min-height: 1.25em; text-align: left; }
21.  
22.  
23. /* sort out borders */
24.  
25. #flip-scroll th { border-bottom: 0; border-left: 0; }
26. #flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }
27. #flip-scroll tbody tr { border-left: 1px solid #babcbf; }
28. #flip-scroll th:last-child,
29. #flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }
30. }

No More Tables

This technique was developed by Chris Coyier (@chriscoyier) and described in his post Responsive Data Tables at css-tricks.com. While you're there, you should probably check out the Responsive Tables Roundup post, which showcases all these techniques and more.

Example

Code	Company	Price	Change	Change %	Open	High	Low	Volume
AAC	AUSTRALIAN AGRICULTURAL COMPANY LIMITED.	$1.38	-0.01	-0.36%	$1.39	$1.39	$1.38	9,395
AAD	ARDENT LEISURE GROUP	$1.15	+0.02	1.32%	$1.14	$1.15	$1.13	56,431
AAX	AUSENCO LIMITED	$4.00	-0.04	-0.99%	$4.01	$4.05	$4.00	90,641
ABC	ADELAIDE BRIGHTON LIMITED	$3.00	+0.06	2.04%	$2.98	$3.00	$2.96	862,518
ABP	ABACUS PROPERTY GROUP	$1.91	0.00	0.00%	$1.92	$1.93	$1.90	595,701
ABY	ADITYA BIRLA MINERALS LIMITED	$0.77	+0.02	2.00%	$0.76	$0.77	$0.76	54,567
ACR	ACRUX LIMITED	$3.71	+0.01	0.14%	$3.70	$3.72	$3.68	191,373
ADU	ADAMUS RESOURCES LIMITED	$0.72	0.00	0.00%	$0.73	$0.74	$0.72	8,602,291
AGG	ANGLOGOLD ASHANTI LIMITED	$7.81	-0.22	-2.74%	$7.82	$7.82	$7.81	148
AGK	AGL ENERGY LIMITED	$13.82	+0.02	0.14%	$13.83	$13.83	$13.67	846,403
AGO	ATLAS IRON LIMITED	$3.17	-0.02	-0.47%	$3.11	$3.22	$3.10	5,416,303

Code

This technique as presented here relies on using HTML5 data attributes and accessing them via CSS to specify the column headings. The other option is to hard code the column headings into the CSS, but as we all know content in CSS is a huge no-no.

• HTML
• CSS

1. <table>
2. <thead>
3. <tr>
4. <th>Code</th>
5. <th>Company</th>
6. <th class="numeric">Price</th>
7. <th class="numeric">Change</th>
8. <th class="numeric">Change %</th>
9. <th class="numeric">Open</th>
10. <th class="numeric">High</th>
11. <th class="numeric">Low</th>
12. <th class="numeric">Volume</th>
13. </tr>
14. </thead>
15. <tbody>
16. <tr>
17. <td data-title="Code">AAC</td>
18. <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
19. <td data-title="Price" class="numeric">$1.38</td>
20. <td data-title="Change" class="numeric">-0.01</td>
21. <td data-title="Change %" class="numeric">-0.36%</td>
22. <td data-title="Open" class="numeric">$1.39</td>
23. <td data-title="High" class="numeric">$1.39</td>
24. <td data-title="Low" class="numeric">$1.38</td>
25. <td data-title="Volume" class="numeric">9,395</td>
26. </tr>
27. </tbody>
28. </table>

1. @media only screen and (max-width: 800px) {
3. /* Force table to not be like tables anymore */
4. #no-more-tables table,
5. #no-more-tables thead,
6. #no-more-tables tbody,
7. #no-more-tables th,
8. #no-more-tables td,
9. #no-more-tables tr {
10. display: block;
11. }
12.  
13. /* Hide table headers (but not display: none;, for accessibility) */
14. #no-more-tables thead tr {
15. position: absolute;
16. top: -9999px;
17. left: -9999px;
18. }
19.  
20. #no-more-tables tr { border: 1px solid #ccc; }
21.  
22. #no-more-tables td {
23. /* Behave like a "row" */
24. border: none;
25. border-bottom: 1px solid #eee;
26. position: relative;
27. padding-left: 50%;
28. white-space: normal;
29. text-align:left;
30. }
31.  
32. #no-more-tables td:before {
33. /* Now like a table header */
34. position: absolute;
35. /* Top/left values mimic padding */
36. top: 6px;
37. left: 6px;
38. width: 45%;
39. padding-right: 10px;
40. white-space: nowrap;
41. text-align:left;
42. font-weight: bold;
43. }
44.  
45. /*
46. Label the data
47. */
48. #no-more-tables td:before { content: attr(data-title); }
49. }