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

Question

我在将表格转换为响应速度更快的设计时遇到了麻烦,我在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 来实现这一点,我创建了这个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不同屏幕宽度的定义.这也可以防止浮动元素的任何意外副作用.

可调整大小的小提琴

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