我在将表格转换为响应速度更快的设计时遇到了麻烦,我在Google上尝试了很多资源,但它们都是有限的,并且不能按预期工作.我遇到的根本问题是我的表格是动态生成的,我不想编辑我在Google上找到的资源,因此我可以轻松更新它们并且不会过多地破坏代码.
无论如何,我的桌子设计非常简单.有5列X行(取决于从数据库生成的内容).每当用户调整浏览器大小(或者当他们使用移动电话时),我想改变我的桌子,以便它也适合小屏幕.一个例子是：
桌面
Header 1 | Header 2 | Header 3
------------------------------
Content | Content | Content
电话
Header 1 | Content
------------------
Header 2 | Content
------------------
Header 3 | Content
我试图通过使用display：table-row,当屏幕达到一定宽度时使用CSS,我创建了this jsfiddle来显示我当前的代码.然而,目前th和td垂直显示在彼此上方/下方,并且不像我打算那样彼此相邻.我尝试使用float：left和float：right但是这不起作用(参见jsfiddle).任何人都可以帮我用CSS完成我想要的东西吗？如果这是不可能的,我将如何使用Javascript进行此操作,请记住,在加载页面时(有些动态添加到页面),我的表格不会全部生成？
最佳答案
使用thead和tbody元素,您可以这样尝试：
原文链接：https://www.f2er.com/css/427639.htmlCSS
@media screen and (max-width: 750px) {
tbody,thead { float: left; }
thead { min-width: 120px }
td,th { display: block }
}
