此问题在此处已有答案：
Make table responsive on mobile devices using HTML/CSS（4个答案）
How to make an html table responsive（9个答案）
How to make table responsive（2个答案）
Making table content responsive to screen size（1个答案）
昨天就关门了。
我正在尝试让我正在处理的表数据以一种我认为据我所知不可能的方式响应，除非这里的其他人认为这是可能的？
基本上，我有一个表格，在最大大小时显示TR中的3个TD元素。当向下滚动到最小大小时，TR只显示2个TD元素，而之前的第三个TD显示在2下。类似于以下内容（或多或少的视觉表示）：
最大长度：
<table>
<tbody>
<tr>
<td>First table data</td> <td>Second table data</td> <td>Third table data</td>
<td>Fourth table data</td> <td>Fifth table data</td> <td>Sixth table data</td>
</tr>
</tbody>
<table>字符串
最小长度：
<table>
<tbody>
<tr>
<td>First table data</td> <td>Second table data</td>
<td>Third table data</td> <td>Fourth table data</td>
<td>Fifth table data</td> <td>Sixth table data</td>
</tr>
</tbody>
<table>型
这是可能的吗？如果是的话，如何开始呢？这需要jQuery吗？
2条答案
按热度按时间n7taea2i1#
由于表格的固有结构，使表格具有响应性可能有点挑战性，但通过一些CSS技巧绝对可以实现。您可以使用媒体查询来根据屏幕宽度更改表格布局。
下面是如何创建响应表的示例：
个字符
nue99wik2#
表格是自动“响应”的，因为它们会调整单元格的大小以适应容器--但不会达到您所期望的程度，即当没有足够的空间时，让单元格换行到下一行。
您所需的布局更类似于flexbox布局，而不是表格。
您可以强制表格使用Flex布局而不是其正常表格规则：
个字符
.但是为了避免混淆下一个开发人员接触你的代码，如果可能的话，最好将你的HTML转换为使用div或span而不是表标记。