Html 如何制作响应式表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18436864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make responsive table
提问by Bishan
回答by hitautodestruct
Basically
基本上
A responsive table is simply a 100% width table.
响应式表格只是一个 100% 宽度的表格。
You can just set up your table with this CSS:
你可以用这个 CSS 来设置你的表格：
.table { width: 100%; }
You can use media queries to show/hide/manipulate columns according to the screens dimensions by adding a class (or targeting using nth-child, etc):
您可以使用媒体查询通过添加类（或使用nth-child等定位）根据屏幕尺寸显示/隐藏/操作列：
@media screen and (max-width: 320px) {
.hide { display: none; }
}
HTML
HTML
<td class="hide">Not important</td>
More advanced solutions
更先进的解决方案
If you have a table with a lot of data and you would like to make it readable on small screen devices there are many other solutions:
如果您有一个包含大量数据的表格，并且您想让它在小屏幕设备上可读，那么还有许多其他解决方案：
- css-tricks.com offers up this articlefor handling large data tables.
- Zurb also ran into this issue and solved itusing javascript.
- Footablesis a great jQuery plugin that also helps you out with this issue.
- As posted by Elvin Arzumano?luthis is a great list of examples.
- css-tricks.com 提供了这篇文章来处理大型数据表。
- Zurb 也遇到了这个问题并使用 javascript解决了它。
- Footables是一个很棒的 jQuery 插件，它也可以帮助您解决这个问题。
- 正如Elvin Arzumano?lu发布的那样，这是一个很好的示例列表。
回答by Swarnamayee Mallia
Check the below links for responsive table:
检查以下链接以获取响应表：
http://css-tricks.com/responsive-data-tables/
http://css-tricks.com/responsive-data-tables/
http://zurb.com/playground/responsive-tables
http://zurb.com/playground/responsive-tables
http://zurb.com/playground/projects/responsive-tables/index.html
http://zurb.com/playground/projects/responsive-tables/index.html
回答by ElvinD
I recommend the Wordpress plugin Magic Liquidizer Responsive Table.
我推荐 Wordpress 插件Magic Liquidizer Responsive Table。
回答by interface
If you want control over the td's/th's like you can do with block level elements & floats: Its NOT possible. There is no way to make a td float over or under a th.
如果您想控制 td/th，就像您可以使用块级元素和浮点数一样：这是不可能的。没有办法让 td 浮动在 th 之上或之下。
回答by wonder
For make responsive table you can make 100% of each ‘td' and insert related heading in the ‘td' on the mobile(less the '768px' width).
对于制作响应式表格，您可以制作每个“td”的 100% 并在移动设备上的“td”中插入相关标题（减去“768px”宽度）。
See More:
http://wonderdesigners.com/?p=227
回答by RN Kushwaha
Pure css way to make a table fully responsive, no JavaScript is needed. Checke demo here Responsive Tables
使表格完全响应的纯 css 方式，不需要 JavaScript。在这里检查演示响应表
<!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>[email protected]</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>
回答by user3696501
To make a responsive table, you can make the width of each td100% and insert a related heading in the tdon mobile browsers (that are less 768pxwidth.)
要制作响应式表格，您可以将每个表格的宽度设为td100%，并td在移动浏览器中插入相关标题（768px宽度较小）。
Here is a website that demonstrates this technique: http://www.quizexpo.com/list-of-banks-in-india/
这是一个演示此技术的网站： http://www.quizexpo.com/list-of-banks-in-india/
