41

我有一个表格来表示我的 html 页面中的一些数据。我正在尝试使此表具有响应性。我怎样才能做到这一点？

这里是Demo.

4

8 回答 8

48

基本上

响应式表格只是一个 100% 宽度的表格。

您可以使用以下 CSS 设置您的表格：

.table { width: 100%; }

Demo here

nth-child您可以使用媒体查询通过添加类（或使用定位等）根据屏幕尺寸显示/隐藏/操作列：

@media screen and (max-width: 320px) {
    .hide { display: none; }
}

HTML

<td class="hide">Not important</td>

更先进的解决方案

如果您有一个包含大量数据的表格，并且希望使其在小屏幕设备上可读，那么还有许多其他解决方案：

于 2013-08-26T06:10:55.447 回答
17

检查以下链接以获取响应表：

http://css-tricks.com/responsive-data-tables/

http://zurb.com/playground/responsive-tables

http://zurb.com/playground/projects/responsive-tables/index.html

于 2013-08-26T05:03:21.077 回答
5

你可以查看这个Demo或者bootstrap

于 2013-08-26T04:58:22.970 回答
1

如果您想控制 td/th，就像您可以使用块级元素和浮点数一样：这是不可能的。没有办法让 td 在 th 上方或下方浮动。

于 2014-05-02T13:54:14.220 回答
1

我推荐 Wordpress 插件Magic Liquidizer Responsive Table。

于 2014-02-18T06:16:50.670 回答
0

对于制作响应式表格，您可以制作每个 'td' 的 100% 并在移动设备上的 'td' 中插入相关标题（减去 '768px' 宽度）。

查看更多：
http ://wonderdesigners.com/?p=227

于 2014-02-27T10:44:46.567 回答
-1

使表格完全响应的纯 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>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>
于 2014-08-23T19:31:24.307 回答
-2

要制作响应式表格，您可以将每个 100% 的宽度设置为并在移动浏览器td 中插入相关标题（宽度较小）。td768px

这是一个演示此技术的网站：http://www.quizexpo.com/list-of-banks-in-india/

于 2014-06-01T09:49:48.583 回答