使用CSS实现水平表格布局

Question

与通常的垂直表格数据布局不同，希望像这样：

我想用css将其显示为以下样式:

有任何想法吗？

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

- input

---

你有什么问题？你的HTML代码有什么问题？ - Pekka

“在 CSS 中”是什么意思？你打算将这个表格改为 div 吗？ - Kyle

你想使用带CSS的表格，还是想使用div和CSS？顺便说一下，你的代码中有一个额外的</div>。 - Greg K

@Pekka，我的HTML代码可以工作，但我想将表格数据呈水平格式而不是通常的垂直格式。@Kyle，如果将表格更改为div可以给我一个水平表格布局，那么是的。@Greg，实际上在此之前还有另一个div，这段代码我没有发布。 - input

Answer 1

你可以这样做，它仍然是语义化的：

<table>
  <tr>
    <th>Header</th>
    <td>content</td>
    <td>content</td>
    <td>content</td>
  </tr>
</table>

- ivanasetiawan

Answer 2

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

- Victor

Answer 3

表格必须是表格，因此您应该按照语义描述它。
一个表格由包含表格数据的表格行组成。仅通过使用CSS将表格数据更改为表格行只会使您的语义无效。表格行旨在作为表格行，因此您应该重新构造HTML而不是使用CSS重新排列任何内容。

如果您想实现所示的水平布局，请改用div容器而不是表格。

请记住：表格用于显示表格数据。它们并不是真正意义上的布局基础。

- Ham Vocke

---

@Ham，感谢您的评论。我正在使用表格来显示表格数据，并且我已经看到一些网站使用水平“表格”布局而不是垂直布局来显示表格数据。因此，想知道我是否也可以这样做。 - input

那你为什么不重新构建你的表格呢？不要把多个<td>放到一个<tr>中，而是写几个包含一个<td>的<tr>。 这样就能得到你需要的结果了，不是吗？ - Ham Vocke

谢谢指针，我找到了我想要的东西：http://icant.co.uk/csstablegallery/index.php?css=60#r60 - input

Answer 4

这篇文章很老了，但是无妨。我认为我理解了 OP 的问题，但是我看不到他的图片。实际上，问题归根结底是他有一系列带有标题数据和正文数据的行。当他获取一行时，他会得到一个标题单元格内容和一个正文单元格内容。如果他只是按照获取到的方式将其放入表格中，它会显示如下：

<table>
  <tr>
    <th>header 1</th>
    <td>body 1</td>
  </tr>
  <tr>
    <th>header 2</th>
    <td>body 2</td>
  </tr>
</table>

这没问题，但他真正想要的是这个：

<table>

  <tr>
    <th>header 1</th>
    <th>header 2</th>
  </tr>
  <tr>
    <td>body 1</td>
    <td>body 2</td>
  </tr>
</table>

所以解决方案是保留两个数组，一个用于存储表头，另一个用于存储表格内容。当你获取到所有行并且数组已经填满时，再生成你的 HTML 代码。

- fet