使用CSS的水平表格布局 [英] Horizontal table layout using CSS

问题描述

代替通常的垂直表数据布局是这样的：

Instead of the usual vertical table data layout something like this:

我想在CSS中显示如下：

I'd like to display it like this in css:

有什么想法吗？

我的php / html代码：

My php/html code:

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

推荐答案

表必须是表，因此您要描述

一个表由包含表数据的表行组成。仅使用CSS将表数据更改为表行只会使您的语义毫无价值。表格行是表格行，因此您应该重组HTML而不是使用CSS进行重新排列。

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.

如果您想实现所描绘的水平布局

If you want to achieve a horizontal layout as you depicted it, I recommend using div-Containers instead of tables.

记住：表用于显示表格数据。实际上，它们并不是要用作布局的基础。

Remember: Tables are used to display tabular data. They are not really meant to be used as a foundation for your layout.

这篇关于使用CSS的水平表格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！