Question

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

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

桌面

Header 1 | Header 2 | Header 3
------------------------------
Content  | Content  | Content

电话

Header 1 | Content
------------------
Header 2 | Content
------------------
Header 3 | Content

我试图通过在屏幕达到特定宽度时使用CSS display: table-row来实现此目的，我创建了this jsfiddle来显示我当前的代码。但是目前th和td在垂直上方/下方显示，而不是像我打算那样彼此相邻。我尝试使用float: left和float: right，但这不起作用（请参阅jsfiddle）。任何人都可以帮我用CSS完成我想要的东西吗？如果这是不可能的，我将如何使用Javascript进行此操作，请记住，当页面加载时（有些动态添加到页面中），我的表格不会全部生成？

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

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

Resizable Fiddle

＆＃13;

.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%;
  }
}

＆＃13;

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

＆＃13;

Answer 3

我把你分开了。这就是我解决它的方式：

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

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

3 个答案:

Resizable Fiddle