使用 CSS 显示的响应式表格：table-row

Question

我无法将我的表格转换为更具响应性的设计，我在 Google 上尝试了许多资源，但它们都有限且无法按预期工作。我遇到的根本问题是我的表是动态生成的，我不想编辑在 Google 上找到的资源，因此我可以轻松更新它们并且不会过多地混淆代码。

无论如何，我的桌子的设计非常简单。有 X 行的 5 列（取决于从数据库生成的内容）。每当用户调整浏览器的大小时（或当他们使用手机时），我都想更改我的表格，使其也适合较小的屏幕。这方面的一个例子是：

桌面

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 来解决这个问题，记住我的表格不会在页面加载时全部生成（有些是动态添加到页面中的）？

Answer 1

如何针对不同的屏幕宽度调整table 定义。这也可以防止浮动元素的任何意外副作用。

Resizable Fiddle

.table {
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
}
@media screen and (max-width: 750px) {
  .cell {
    display: block;
  }
  .row {
    display: table-cell;
    width: 50%;
  }
}

<div class="table">
  <div class="row">
    <div class="cell">Head #1</div>
    <div class="cell">Head #2</div>
    <div class="cell">Head #3</div>
    <div class="cell">Head #4</div>
  </div>
  <div class="row">
    <div class="cell">Content #1</div>
    <div class="cell">Content #2</div>
    <div class="cell">Content #3</div>
    <div class="cell">Content #4</div>
  </div>
</div>

Answer 2

我已经分叉了你的小提琴。我就是这样解决的：

HTML

<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>

CSS

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

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

Answer 3

使用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 }
}