Html 使用CSS显示的响应表：表行

我很难将我的桌子转换成更具响应性的设计，我在谷歌上尝试了很多资源，但它们都是有限的，不能像预期的那样工作。我面临的潜在问题是，我的表是动态生成的，我不想编辑在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来显示我当前的代码。然而，目前，

th

和

td

彼此垂直地上下显示，而不是像我想做的那样彼此相邻。我试着使用

float:left

和

float:right

但是这不起作用（请参阅jsfiddle）。有人能帮我用CSS完成我想要的吗？如果这是不可能的，我将如何使用Javascript来实现这一点，记住我的表在加载页面时不会全部生成（有些是动态添加到页面的）？

使用

thead

和

tbody

元素，您可以这样尝试：

CSS

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

---

我用叉子叉了你的小提琴。这就是我解决问题的方法：

HTML

---

如何调整不同屏幕宽度的

表

定义。这还可以防止浮动元素的任何意外副作用

.table{
显示：表格；
宽度：100%；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
}
@媒体屏幕和屏幕（最大宽度：750px）{
.细胞{
显示：块；
}
.行{
显示：表格单元格；
宽度：50%；
}
}

头#1
头#2
头#3
头4
内容#1
内容#2
内容#3
内容#4

看看bootstrap中的容器css类。这将把你带到某个地方。这是一篇关于中的响应表的好文章。@Joshuabhrens我没有看到

边距
和
填充
在这种情况下会有什么帮助，这就是Bootstrap中的
容器
类所具有的功能。@Vucko我已经读过了，但他们给出了我不想实施的解决方案，因为他们没有提供我需要的解决方案（例如饼图），而且唯一接近我的情况的解决方案对我不起作用，因为我的表是动态生成的。看起来很有希望，但是，如果将浏览器的大小调整到100px以下，有没有办法防止表格完全垂直？目前，它在一定范围内工作，但仍然可以折叠到我的示例中的宽度。您可以为table元素添加一个最小宽度，或者为
thead
和
tbody
设置一个相对宽度（例如各50%），嘿，又来了！我实现了您的解决方案，我想知道是否也可以为所有
td
元素设置
thead
，因为我们有时会有多于一行。我知道用
thead
本身是不可能的，但可能用字幕？或者最好的方法是什么？不确定你的目标，但你可能在同一张表中有许多身体元素嗨，约书亚，根据你对这个问题的回答，你有没有可能对另一个类似的问题有更好的答案：
<div class="row">
    <span>Head #1</span>
    <span>Head #2</span>
    <span>Head #3</span>
    <span>Head #4</span>
</div>
<div class="row">
    <span>Content #1</span>
    <span>Content #2</span>
    <span>Content #3</span>
    <span>Content #4</span>
</div>

.row
{
    display: table-row;
}
.row > *
{
    display: table-cell;
}

@media screen and (max-width: 750px) {
    .row
    {
        display: block;
        float: left;
    }
    .row > *
    {
        display: block;
    }
}