【问题讨论】：
<table>标签处设置类名
标签： css html responsive-design media-queries
响应式表格只是一个 100% 宽度的表格。
您可以使用此 CSS 设置您的表格：
.table { width: 100%; }
您可以使用媒体查询通过添加类（或使用nth-child 等定位）根据屏幕尺寸显示/隐藏/操作列：
@media screen and (max-width: 320px) {
.hide { display: none; }
}
HTML
<td class="hide">Not important</td>
如果您有一个包含大量数据的表格，并且您希望使其在小屏幕设备上可读，那么还有许多其他解决方案：
【讨论】：
CSS 表格代码复制到@media{} 并更改参数以与移动屏幕兼容。它奏效了。我认为这是正确的。这是Demo。那是对的吗 ？感谢您的回答。 :)
manipulates the element 表示？
changes the table的css。所以，不要只是复制粘贴你所有的 css 代码并更改它。仅复制移动版本所需的部分。
table-layout: fixed 可能会有很大帮助。
我推荐 Wordpress 插件Magic Liquidizer Responsive Table。
【讨论】：
为了制作响应式表格，您可以制作每个“td”的 100% 并在移动设备上的“td”中插入相关标题（减去“768px”宽度）。
【讨论】：
如果您想控制 td/th，就像您可以使用块级元素和浮点数一样： 这是不可能的。 没有办法让 td 在 th 上方或下方浮动。
【讨论】：
要制作响应式表格，您可以将每个td 的宽度设置为100%，并在移动浏览器上的td 中插入相关标题（小于768px 宽度。）
这是一个演示此技术的网站：http://www.quizexpo.com/list-of-banks-in-india/
【讨论】：
让表格完全响应的纯 css 方式，不需要 JavaScript。在这里查看演示Responsive Tables
<!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>
【讨论】：