响应式 table 使用 CSS 显示：table-行

Question

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

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

桌面

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 彼此垂直显示 above/under，而不是像我打算做的那样彼此相邻。我尝试使用 float: left 和 float: right 但这不起作用（请参阅 jsfiddle）。任何人都可以帮助我使用 CSS 完成我想要的吗？如果那不可能，我将如何使用 Javascript 来解决这个问题，请记住我的 table 不会在页面加载时全部生成（有些是动态添加到页面中的） )?

Answer 1

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

Answer 2

我分叉了你fiddle。这就是我解决它的方式：

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

如何针对不同的屏幕宽度调整 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>

响应式 table 使用 CSS 显示：table-行

Responsive table using CSS display: table-row

html

css

html-table

css-tables

Resizable Fiddle