我想创建一个响应表，如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
Kailash Chandra的回答给了我一些我想要做的事情的线索。在大多数情况下，我想要一个非常紧凑的2列表，Bootstrap总是强制第一列的最小宽度。我只是想要一个像桌子一样的桌子，直到我达到手机尺寸，然后让它变成一排交替标题和它下面的值。对于这个css来说，结果是非常微不足道的，它基本上只是使用相同的技巧来使它像表一样退出。在这种情况下，我不会改变任何关于它的东西，因为它满足了我的需要，但是添加一些样式会很容易。
@media only screen and (max-width: 400px) {
.flyout-table table,
.flyout-table th,
.flyout-table td,
.flyout-table tr {
display: block;
}
}