Html 仅使用css而不使用javascript将html表强制为单个堆叠列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12348294/
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
Force html table into single stacked column using only css and no javascript
提问by KJF
I'm creating a html template that wraps a table that is used to lay out a form. I have full control over the html that wraps the table not the table itself. The table is injected into my template before it's sent to the client. I have no control over this whatsoever. The only thing I do have control over is the html that wraps the table and any CSS.
我正在创建一个 html 模板，该模板包含一个用于布置表单的表格。我可以完全控制包装表格的 html 而不是表格本身。该表在发送给客户端之前被注入到我的模板中。我对此无能为力。我唯一可以控制的是包装表格的 html 和任何 CSS。
The table is a two column table that looks like this:
该表是一个两列表，如下所示：
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>this is column 1</td>
<td>this is column 2</td>
</tr>
</table>
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is column 1 |this is column 2 |
-------------------------------------------------
However I would prefer if we could show it as one stacked column.
但是，如果我们可以将它显示为一个堆叠的列，我更愿意。
----------------------------
|Column 1 |
-----------------------------
|this is column 1 |
-----------------------------
|Column 2 |
-----------------------------
| this is column 2 |
-----------------------------
Is there a way to achieve this using only CSS, no Javascript?
有没有办法只使用 CSS 而不是 Javascript 来实现这一点？
采纳答案by Jeroen
Nope, this is not reasonablypossible without changing the markup. Tables in HTML are structured as rows, not as columns. In the example you give you're re-ordering the content:
不，这不是合理不改变的标记可能。HTML 中的表格结构为行，而不是列。在您提供的示例中，您正在重新排序内容：
Original order:Column 1 -> Column 2 -> this-is-col-1 -> this-is-col-2
原订单：Column 1 -> Column 2 -> this-is-col-1 -> this-is-col-2
New ordering:Column 1 -> this-is-col-1 -> Column 2 -> this-is-col-2
新订购：Column 1 -> this-is-col-1 -> Column 2 -> this-is-col-2
Why did I say "not reasonablypossible"? Well, with absolute positioning and similar techniques you may be able to hack the layout you want together - but there's a world of CSS-hurt waiting as I don't expect that approach to play nice in a real page.
为什么我说“没有合理的可能”？好吧，使用绝对定位和类似的技术，您可能能够一起破解您想要的布局 - 但是有一个 CSS-hurt 等待的世界，因为我不希望这种方法在真实页面中发挥出色。
Additional note: To add to the "re-ordering" problem, something that may be a little easier to accomplish would be this layout, where the order stays the same:
附加说明：要添加到“重新排序”问题中，可能更容易完成的是此布局，其中顺序保持不变：
----------------------------
|Column 1 |
-----------------------------
|Column 2 |
-----------------------------
|this is column 1 |
-----------------------------
| this is column 2 |
-----------------------------
But that's obviously not what you want.
但这显然不是你想要的。
回答by George
Try adding this to you CSS:
尝试将其添加到您的 CSS：
td {
display: table-row;
}
Cheers.
干杯。
回答by Kneel-Before-ZOD
Simply; No. You cannot turn a row turn a 2-column table into a 1-column table without some JavaScript.
Either tell the coders of the table to create the table that way, or simply use JavaScript to re-structure the table.
简单地; 不可以。如果没有一些 JavaScript，您无法将一行将 2 列表转换为 1 列表。
要么告诉表格的编码人员以这种方式创建表格，要么简单地使用 JavaScript 重新构建表格。
回答by yesnoio
I was confronted with a similar problem recently & seem to have found a good solution. Tables have a bad rap due to frequent mis-use, but are indeed the leanest option when needing to display a grid of datain a variable width viewport.
我最近遇到了类似的问题，似乎找到了一个很好的解决方案。由于频繁的误用，表格的名声不好，但当需要在可变宽度的视口中显示数据网格时，它确实是最精简的选择。
The answer to the original question is still no. In order to solve this problem without JavaScript, one mustbe able to edit the table markup.
原始问题的答案仍然是否定的。为了在没有 JavaScript 的情况下解决这个问题，必须能够编辑表格标记。
Tables can look... okay... when stretched wide, but look just terrible when squished. "Responsive" tables are possible only by adding contextual markup to each cell (e.g. span.label& span.dataelements). We can easily hide this new superfluous output by default & only show it when in a responsive view state.
桌子可以看起来......好吧......当伸展得很宽时，但当被压扁时看起来很糟糕。“响应式”表格只有通过向每个单元格（例如span.label&span.data元素）添加上下文标记才有可能。默认情况下，我们可以轻松隐藏这个新的多余输出，并且仅在处于响应视图状态时才显示它。
table.responsive td .label {
display: none;
}<table class="responsive">
<thead>
<tr>
<th>Column Foo</th>
<th>Column Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="label">Column Foo</span><span class="data">Baz</span></td>
<td><span class="label">Column Bar</span><span class="data">Qux</span></td>
</tr>
</tbody>
</table>When in a responsive view state, hide the theadelement & show the .labelelements.
当处于响应式视图状态时，隐藏thead元素并显示.label元素。
table.responsive {
width: 100%;
}
table.responsive td .label {
display: none;
}
table.responsive th {
background-color: #ddd;
}
table.second {
margin-top: 5em;
}
@media screen and (max-width:640px) {
table.responsive thead {
display: none;
}
table.responsive tbody th,
table.responsive tbody td {
display: block;
}
table.responsive td span {
display: block;
}
table.responsive td .label {
background-color: #ddd;
font-weight: bold;
text-align: center;
}
}I've created a repowhich covers the solution in greater detail. Click hereto see it work.
回答by Amandeep Jiddewar
only solution I can think of is, changing your Markup. I would change it in such a way to take one column and write it as an row in markup. Here is an fiddle I have created : http://jsfiddle.net/MHsxU/
我能想到的唯一解决方案是更改您的标记。我会以这样一种方式改变它，将一列写成标记中的一行。这是我创建的小提琴：http: //jsfiddle.net/MHsxU/
回答by timtom
Still having issues and in Chrome?
For those still having issues (like me) check you have <!DOCTYPE html>in the head of your document. If you don't Chrome seems to totally ignore anything you add and keep display: table-cell.
在 Chrome 中仍有问题？
对于那些仍然有问题的人（像我一样），请检查您<!DOCTYPE html>的文档头部。如果您不这样做，Chrome 似乎会完全忽略您添加和保留的任何内容display: table-cell。
回答by Jess
Actually, it's incredibly easy (and can be done with 2 lines of css): Make your td width 100% and set overflow:auto. Your second column will automatically wrap around.
实际上，这非常简单（并且可以使用 2 行 css 完成）：使您的 td 宽度为 100% 并设置溢出：自动。您的第二列将自动环绕。
回答by starbeamrainbowlabs
You can achieve something similar by using display:block;.
您可以使用display:block;.
See this fiddle: http://jsfiddle.net/R53KH/
看到这个小提琴：http: //jsfiddle.net/R53KH/
