html – 使用CSS显示的响应表：table-row

我在将表格转换为响应速度更快的设计时遇到了麻烦,我在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元素,您可以这样尝试：

http://jsfiddle.net/uzsw7s4o/

CSS

@media screen and (max-width: 750px) {
    tbody,thead { float: left; }
    thead { min-width: 120px }
    td,th { display: block }
}