如何使响应表
我有一个表格来表示我的HTML页面中的一些数据。 我试图使这个表作为响应。 我怎样才能做到这一点 ？
这是Demo 。
基本上
响应表只是一个100％宽度的表格。
你可以用这个CSS来设置你的表格：
.table { width: 100%; }
在这里演示
您可以使用媒体查询来根据屏幕尺寸显示/隐藏/操作列，方法是添加一个类（或使用nth-child等进行定位）：
@media screen and (max-width: 320px) { .hide { display: none; } }
HTML
<td class="hide">Not important</td>
更高级的解决scheme
如果你的桌子上有大量的数据，而你想在小屏幕设备上阅读，还有很多其他的解决scheme：
- css-tricks.com提供了这篇文章来处理大型数据表。
- Zurb也遇到了这个问题， 并使用JavaScript 解决了它 。
- Footables是一个很棒的jQuery插件，可以帮助你解决这个问题。
- 正如ElvinArzumanoğlu发布的，这是一个很好的例子 。
检查响应表的下面的链接：
http://css-tricks.com/responsive-data-tables/
http://zurb.com/playground/responsive-tables
http://zurb.com/playground/projects/responsive-tables/index.html
您可以查看此演示或引导程序
如果你想控制td的/ th的就像你可以做块级元素和浮点数：它不可能。 没有办法让td漂浮在上面或下面。
我推荐Wordpress插件Magic Liquidizer响应表 。
为了使响应表，你可以使每个'td'的100％，并在手机上'td'（less于'768px'宽度）插入相关的标题。
纯CSS的方式来使表充分响应，不需要JavaScript。 Checke演示这里响应表
<!DOCTYPE> <html> <head> <title>Responsive Table</title> <style> /* only for demo purpose. you can remove it */ .container{border: 1px solid #ccc; background-color: #ff0000; margin: 10px auto;width: 98%; height:auto;padding:5px; text-align: center;} /* required */ .tablewrapper{width: 95%; overflow-y: hidden; overflow-x: auto; background-color:green; height: auto; padding: 5px;} /* only for demo purpose just for stlying. you can remove it */ table { font-family: arial; font-size: 13px; padding: 2px 3px} table.responsive{ background-color:#1a99e6; border-collapse: collapse; border-color: #fff} tr:nth-child(1) td:nth-of-type(1){ background:#333; color: #fff} tr:nth-child(1) td{ background:#333; color: #fff; font-weight: bold;} table tr td:nth-child(2) { background:yellow; } tr:nth-child(1) td:nth-of-type(2){color: #333} tr:nth-child(odd){ background:#ccc;} tr:nth-child(even){background:#fff;} </style> </head> <body> <div class="container"> <div class="tablewrapper"> <table class="responsive" width="98%" cellpadding="4" cellspacing="1" border="1"> <tr> <td>Name</td> <td>Email</td> <td>Phone</td> <td>Address</td> <td>Contact</td> <td>Mobile</td> <td>Office</td> <td>Home</td> <td>Residency</td> <td>Height</td> <td>Weight</td> <td>Color</td> <td>Desease</td> <td>Extra</td> <td>DOB</td> <td>Nick Name</td> </tr> <tr> <td>RN Kushwaha</td> <td>rn.kushwaha@test.com</td> <td>--</td> <td>Varanasi</td> <td>-</td> <td>999999999</td> <td>022-111111</td> <td>-</td> <td>India</td> <td>165cm</td> <td>58kg</td> <td>bright</td> <td>--</td> <td>--</td> <td>03/07/1986</td> <td>Aryan</td> </tr> </table> </div> </div> </body> </html>
为了创build一个响应表，可以将每个td的宽度设置为100％，并在移动浏览器的td插入相关标题（宽度小于768px ）。
这是一个网站，演示这种技术： http://www.quizexpo.com/list-of-banks-in-india/ : http://www.quizexpo.com/list-of-banks-in-india/
