表格中的特定行布局答案

【问题标题】：Specific rows layout in a table表格中的特定行布局
【发布时间】：2011-07-15 17:26:08
【问题描述】：

有没有办法控制表格中行流的管理方式？

我想按给定的数字对它们进行分组，然后并排显示这些组，而不是垂直流。

当组大小为 3 时，此（非标准）HTML 代码显示了预期结果，但使用了多个 table：

<style type="text/css">
    table
    {
        float: left;
        border-collapse: collapse;
    }

    td, th
    {
        border: solid black 1px;
    }
</style>

<table>
    <tr><th>ID</th><th>Name</th><th>Address</th></tr>
    <tr><td>1</td><td>John</td><td>Oregon</td></tr>
    <tr><td>2</td><td>Joe</td><td>NY</td></tr>
    <tr><td>3</td><td>Bobby</td><td>Texas</td></tr>
</table>

<table>
    <tr><th>ID</th><th>Name</th><th>Address</th></tr>
    <tr><td>4</td><td>John</td><td>Oregon</td></tr>
    <tr><td>5</td><td>Joe</td><td>NY</td></tr>
    <tr><td>6</td><td>Bobby</td><td>Texas</td></tr>
</table>

<table>
    <tr><th>ID</th><th>Name</th><th>Address</th></tr>
    <tr><td>7</td><td>John</td><td>Oregon</td></tr>
    <tr><td>8</td><td>Joe</td><td>NY</td></tr>
</table>

这是得到的结果：

【问题讨论】：

你的做法有什么问题？
如果我没看错：坚持使用多个表格。请参阅：stackoverflow.com/questions/5091503/… - 你（afaik）不能在 IE7 中浮动表格单元格。您需要 IE7 支持吗？
@JohnP ：确实，这种方式本身并没有真正的问题，但是如果存在标准的 HTML/CSS 选项，它会更加灵活，并且不会将生成的 HTML 代码与表格混淆，所以它将更容易为浏览器解析和使用 Javascript 进行操作，例如使用 JQuery；此外，生成此布局所需的服务器端代码非常简单明了。
@thirtydot ：感谢您提供的信息。我希望它可以在 Outlook 中工作，在 IE 中也是如此。但是，对于我的文化和未来的开发者，我想知道是否有任何标准的做法。
在 Outlook 中没有任何作用。您必须坚持使用 HTML4 和基本布局，甚至可能将其包装在另一个表格中。前景是邪恶的。

标签： html css html-table

【解决方案1】：

听起来你想要rowgroups 或colgroups。行组是使用<tbody>创建的

<table>
  <tbody>
    <tr><th>ID</th><th>Name</th><th>Address</th></tr>
    <tr><td>4</td><td>John</td><td>Oregon</td></tr>
    <tr><td>5</td><td>Joe</td><td>NY</td></tr>
    <tr><td>6</td><td>Bobby</td><td>Texas</td></tr>
  </tbody>
  <tbody>
    <tr><th>ID</th><th>Name</th><th>Address</th></tr>
    <tr><td>7</td><td>John</td><td>Oregon</td></tr>
    <tr><td>8</td><td>Joe</td><td>NY</td></tr>
  </tbody>
</table>

http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3

然后您可以通过将tbodys 更改为display:table 并浮动它们来将组并排放置。这将给出并排表格的外观，但在语义上仍然正确。

【讨论】：

实际上，如果 Outlook 是一个目标，那么这个花哨的东西将不起作用。对不起。
感谢这个有用的答案；它不像我期望的那样简单，我特别希望能够只声明一次列标题，但比多表解决方案要干净得多。