當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

[转]Responsive Tables Demo

發布時間：2023/11/30 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 [转]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 ColumnThis technique, first described by Stuart Curry (@irishstu) involves simply hiding less important columns on smaller screen sizes.
Example CodeCompanyPriceChangeChange %OpenHighLowVolume
AACAUSTRALIAN AGRICULTURAL COMPANY LIMITED.$1.38-0.01-0.36%$1.39$1.39$1.389,395
AADARDENT LEISURE GROUP$1.15? +0.021.32%$1.14$1.15$1.1356,431
AAXAUSENCO LIMITED$4.00-0.04-0.99%$4.01$4.05$4.0090,641
ABCADELAIDE BRIGHTON LIMITED$3.00? +0.062.04%$2.98$3.00$2.96862,518
ABPABACUS PROPERTY GROUP$1.910.000.00%$1.92$1.93$1.90595,701
ABYADITYA BIRLA MINERALS LIMITED$0.77? +0.022.00%$0.76$0.77$0.7654,567
ACRACRUX LIMITED$3.71? +0.010.14%$3.70$3.72$3.68191,373
ADUADAMUS RESOURCES LIMITED$0.720.000.00%$0.73$0.74$0.728,602,291
AGGANGLOGOLD ASHANTI LIMITED$7.81-0.22-2.74%$7.82$7.82$7.81148
AGKAGL ENERGY LIMITED$13.82? +0.020.14%$13.83$13.83$13.67846,403
AGOATLAS IRON LIMITED$3.17-0.02-0.47%$3.11$3.22$3.105,416,303
CodeThe 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
<table>
 <thead>
 <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>AAC</td>
 <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
 <td class="numeric">$1.38</td>
 <td class="numeric">-0.01</td>
 <td class="numeric">-0.36%</td>
 <td class="numeric">$1.39</td>
 <td class="numeric">$1.39</td>
 <td class="numeric">$1.38</td>
 <td class="numeric">9,395</td>
 </tr>
 </tbody>
</table>
 
@media only screen and (max-width: 800px) {
 #unseen table td:nth-child(2), 
 #unseen table th:nth-child(2) {display: none;}
}
?
@media only screen and (max-width: 640px) {
 #unseen table td:nth-child(4),
 #unseen table th:nth-child(4),
 #unseen table td:nth-child(7),
 #unseen table th:nth-child(7),
 #unseen table td:nth-child(8),
 #unseen table th:nth-child(8){display: none;}
}
 
Flip ScrollThis 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 CodeCompanyPriceChangeChange %OpenHighLowVolume
AACAUSTRALIAN AGRICULTURAL COMPANY LIMITED.$1.38-0.01-0.36%$1.39$1.39$1.389,395
AADARDENT LEISURE GROUP$1.15? +0.021.32%$1.14$1.15$1.1356,431
AAXAUSENCO LIMITED$4.00-0.04-0.99%$4.01$4.05$4.0090,641
ABCADELAIDE BRIGHTON LIMITED$3.00? +0.062.04%$2.98$3.00$2.96862,518
ABPABACUS PROPERTY GROUP$1.910.000.00%$1.92$1.93$1.90595,701
ABYADITYA BIRLA MINERALS LIMITED$0.77? +0.022.00%$0.76$0.77$0.7654,567
ACRACRUX LIMITED$3.71? +0.010.14%$3.70$3.72$3.68191,373
ADUADAMUS RESOURCES LIMITED$0.720.000.00%$0.73$0.74$0.728,602,291
AGGANGLOGOLD ASHANTI LIMITED$7.81-0.22-2.74%$7.82$7.82$7.81148
AGKAGL ENERGY LIMITED$13.82? +0.020.14%$13.83$13.83$13.67846,403
AGOATLAS IRON LIMITED$3.17-0.02-0.47%$3.11$3.22$3.105,416,303
CodeThe 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
<table>
 <thead>
 <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>AAC</td>
 <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
 <td class="numeric">$1.38</td>
 <td class="numeric">-0.01</td>
 <td class="numeric">-0.36%</td>
 <td class="numeric">$1.39</td>
 <td class="numeric">$1.39</td>
 <td class="numeric">$1.38</td>
 <td class="numeric">9,395</td>
 </tr>
 </tbody>
</table>
 
?
@media only screen and (max-width: 800px) {
 
 #flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
 #flip-scroll * html .cf { zoom: 1; }
 #flip-scroll *:first-child+html .cf { zoom: 1; }
 
 #flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }
?
 #flip-scroll th,
 #flip-scroll td { margin: 0; vertical-align: top; }
 #flip-scroll th { text-align: left; }
 
 #flip-scroll table { display: block; position: relative; width: 100%; }
 #flip-scroll thead { display: block; float: left; }
 #flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
 #flip-scroll thead tr { display: block; }
 #flip-scroll th { display: block; text-align: right; }
 #flip-scroll tbody tr { display: inline-block; vertical-align: top; }
 #flip-scroll td { display: block; min-height: 1.25em; text-align: left; }
?
?
 /* sort out borders */
?
 #flip-scroll th { border-bottom: 0; border-left: 0; }
 #flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }
 #flip-scroll tbody tr { border-left: 1px solid #babcbf; }
 #flip-scroll th:last-child,
 #flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }
}
 
No More TablesThis 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 CodeCompanyPriceChangeChange %OpenHighLowVolume
AACAUSTRALIAN AGRICULTURAL COMPANY LIMITED.$1.38-0.01-0.36%$1.39$1.39$1.389,395
AADARDENT LEISURE GROUP$1.15? +0.021.32%$1.14$1.15$1.1356,431
AAXAUSENCO LIMITED$4.00-0.04-0.99%$4.01$4.05$4.0090,641
ABCADELAIDE BRIGHTON LIMITED$3.00? +0.062.04%$2.98$3.00$2.96862,518
ABPABACUS PROPERTY GROUP$1.910.000.00%$1.92$1.93$1.90595,701
ABYADITYA BIRLA MINERALS LIMITED$0.77? +0.022.00%$0.76$0.77$0.7654,567
ACRACRUX LIMITED$3.71? +0.010.14%$3.70$3.72$3.68191,373
ADUADAMUS RESOURCES LIMITED$0.720.000.00%$0.73$0.74$0.728,602,291
AGGANGLOGOLD ASHANTI LIMITED$7.81-0.22-2.74%$7.82$7.82$7.81148
AGKAGL ENERGY LIMITED$13.82? +0.020.14%$13.83$13.83$13.67846,403
AGOATLAS IRON LIMITED$3.17-0.02-0.47%$3.11$3.22$3.105,416,303
CodeThis 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
<table>
 <thead>
 <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>
 </tbody>
</table>
 
@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); }
}
 
轉載于:https://www.cnblogs.com/freeliver54/p/5017025.html
總結
                                以上是生活随笔為你收集整理的[转]Responsive Tables Demo的全部內容，希望文章能夠幫你解決所遇到的問題。
                            

                                如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
                            

上一篇： iOS-数据持久化-第三方框架FMDB的
下一篇：对ContentProvider中get

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