Html 使用 CSS 显示的响应式表格：table-row
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27817859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive table using CSS display: table-row
提问by Kevin Voorn
I'm having trouble converting my table to a more responsive design, I've tried many resources on Google but they are all limited and do not work like intended. The underlying problem I'm having is that my tables are dynamically generated and I do not want to edit resources I find on Google so I can update them easily and don't mess with the code too much.
我在将我的表格转换为更具响应性的设计时遇到了麻烦，我在 Google 上尝试了许多资源，但它们都有限且无法按预期工作。我遇到的根本问题是我的表是动态生成的，我不想编辑在 Google 上找到的资源，因此我可以轻松更新它们并且不会过多地弄乱代码。
Anyway, my table has a really simple design. There are 5 columns with X rows (depending on what's being generated from the database). Whenever an user resizes their browser (or when they are using a mobile phone) I want to change my table so it is fitting on smaller screens as well. An example of this would be:
无论如何，我的桌子设计非常简单。有 5 列 X 行（取决于从数据库生成的内容）。每当用户调整浏览器大小时（或当他们使用手机时），我都想更改我的表格，以便它也适合较小的屏幕。这方面的一个例子是：
Desktop
桌面
Header 1 | Header 2 | Header 3
------------------------------
Content | Content | Content
Phone
电话
Header 1 | Content
------------------
Header 2 | Content
------------------
Header 3 | Content
I'm trying to accomplish this by using display: table-rowusing CSS whenever the screen hits a certain width, I created this jsfiddleto display my current code. However currently the thand tdare displayed vertically above/under each other, and not next to each other like I intended to do. I tried using float: leftand float: rightbut that does not work (see the jsfiddle). Can anybody help me accomplish what I want using CSS? And if that is not possible, how would I go over using Javascript for this, keeping in mind that my tables will not all be generated when the page is loaded (some are dynamically added to the page)?
我试图通过display: table-row在屏幕达到一定宽度时使用 CSS来实现这一点，我创建了这个 jsfiddle来显示我当前的代码。然而，目前th和td垂直显示在彼此的上方/下方，而不是像我打算做的那样彼此相邻。我尝试使用float: leftandfloat: right但这不起作用（请参阅 jsfiddle）。任何人都可以帮助我使用 CSS 完成我想要的事情吗？如果这是不可能的，我将如何为此使用 Javascript，请记住，我的表不会在页面加载时全部生成（有些是动态添加到页面中的）？
采纳答案by Fabrizio Calderan
Using theadand tbodyelements, you could try like so:
使用thead和tbody元素，你可以这样尝试：
CSS
CSS
@media screen and (max-width: 750px) {
tbody, thead { float: left; }
thead { min-width: 120px }
td,th { display: block }
}
回答by SW4
How about adjusting the tabledefinitions for the different screen widths. This also prevents any unanticipated side effects of floating your elements.
如何调整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>回答by Joshua Behrens
I have forked you fiddle. That is the way I would solve it:
我已经把你的小提琴分叉了。这就是我解决它的方式：
HTML
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
CSS
.row
{
display: table-row;
}
.row > *
{
display: table-cell;
}
@media screen and (max-width: 750px) {
.row
{
display: block;
float: left;
}
.row > *
{
display: block;
}
}
