我想创建一个类似 this 的响应表
现在，每个单元格都有大量数据内容(动态填充)，如果您注意到此表在最小屏幕尺寸(300 像素或更小)上与内容重叠。虽然这是可以管理的，但如果可能的话，我希望对此有任何最佳解决方案。
如有任何帮助，我们将不胜感激。
最佳答案
这可能是你的答案，请全屏查看结果
table tr td,table tr td{
text-align: center;
}
@media only screen and (max-width: 500px) {
table,head,tbody,th,td,tr {
display: block;
}
thead tr {
display: none;
}
tr {
border: 1px solid #ccc;
}
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
min-height: 30px;
overflow: hidden;
word-break:break-all;
}
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
text-align:left;
font-weight: bold;
}
td:before { content: attr(data-title); }
}<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table width="100%">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>designation</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Name">John</td>
<td data-title="ID">100</td>
<td data-title="designation">Software Engineer</td>
</tr>
<tr>
<td data-title="Name">Shyam</td>
<td data-title="ID">101</td>
<td data-title="designation">Quality Analyst</td>
</tr>
<tr>
<td data-title="Name">Mark</td>
<td data-title="ID">102</td>
<td data-title="designation">Software Engineer</td>
</tr>
<tr>
<td data-title="Name">Bill</td>
<td data-title="ID">104</td>
<td data-title="designation">Quality Analyst</td>
</tr>
<tr>
<td data-title="Name">Arjun</td>
<td data-title="ID">105</td>
<td data-title="designation">Human Resources</td>
</tr>
<tr>
<td data-title="Name">Pratyush</td>
<td data-title="ID">106</td>
<td data-title="designation">Software Engineer</td>
</tr>
<tr>
<td data-title="Name">Anant</td>
<td data-title="ID">101</td>
<td data-title="designation">Administrative Dept</td>
</tr>
</tbody>
</table>
</body>
</html>在上面的代码片段中，你可以使用媒体查询你想要堆叠哪个屏幕尺寸的表格，例如:300px
关于html - 如何在不使用 Bootstrap 的情况下制作响应表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37723448/