Html 使用 CSS 的水平表格布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2736662/
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
Horizontal table layout using CSS
提问by input
Instead of the usual vertical table data layout something like this:
而不是通常的垂直表格数据布局是这样的：
I'd like to display it like this in css:
我想在 css 中这样显示它：
Any ideas?
有任何想法吗？
My php/html code:
我的 php/html 代码：
<div class="center_div">
<table>
<tr>
<th>Author</th>
<th>Quotes</th>
<th>Arabic</th>
<th>Reference</th>
</tr>
<?php while ($row= mysql_fetch_array($result)) { ?>
<tr>
<td width="150"><?php h($row['vAuthor']) ?></td>
<td><?php h($row['cQuotes']) ?></td>
<td><?php h($row['cArabic']) ?></td>
<td><?php h($row['vReference']) ?></td>
</tr>
<?php } ?>
</table>
</div></div>
采纳答案by Ham Vocke
A table has to be a table, therefore you describe it semantically that way.
A table consists of table rows which contain table data. Changing table data to table rows just by using CSS would just make your semantic worthless. Table rows are meant to be table rows so you should rather restructure your HTML instead of re-arranging anything with CSS.
一个表必须是一个表，因此你可以用这种方式在语义上描述它。
表由包含表数据的表行组成。仅使用 CSS 将表格数据更改为表格行只会使您的语义毫无价值。表格行本来就是表格行，所以你应该重新组织你的 HTML，而不是用 CSS 重新排列任何东西。
If you want to achieve a horizontal layout as you depicted it, I recommend using div-Containers instead of tables.
如果你想实现你描述的水平布局，我建议使用 div-Containers 而不是表格。
Remember: Tables are used to display tabular data. They are not really meant to be used as a foundation for your layout.
请记住：表格用于显示表格数据。它们并不是真的要用作布局的基础。
回答by ivanasetiawan
You can do this and it'll still be semantic:
你可以这样做，它仍然是语义：
<table>
<tr>
<th>Header</th>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</table>
回答by Victor
Example from w3schools:
来自w3schools 的示例：
table {
width: 100%
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}<h2>Horizontal Headings:</h2>
<table>
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h2>Vertical Headings:</h2>
<table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>回答by fet
This is really old but what the hey. I think I get what OP is asking for, but I can't see what his images are. What it really comes down to is he has a series of rows with header data and body data. When he gets a row he gets one header cell content and one body cell content. If he were to just put that into a table as he got it, it would show up like this
这真的很旧，但是嘿嘿。我想我得到了 OP 的要求，但我看不到他的图像。真正归结为他有一系列包含标题数据和正文数据的行。当他得到一行时，他会得到一个标题单元格内容和一个正文单元格内容。如果他把它拿到桌子上，它会像这样显示
<table>
<tr>
<th>header 1</th>
<td>body 1</td>
</tr>
<tr>
<th>header 2</th>
<td>body 2</td>
</tr>
</table>
Which is fine but what he really wants is this:
这很好，但他真正想要的是：
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>body 1</td>
<td>body 2</td>
</tr>
</table>
So the solution is to keep two arrays, one for headers, and one for body cells. When you're done getting all your rows and your arrays are full, then generate your HTML.
所以解决方案是保留两个数组，一个用于标题，一个用于正文单元格。当您完成所有行并且您的数组已满时，然后生成您的 HTML。
