开发者

Specific rows layout in a table

is there a way to control the way the flow of rows in a table is managed ?

Instead of having a vertical flow, I'd like to group them by a given number and display the groups side-by-side.

This (non-standard) HTML code shows the expected result when the group size is 3, but uses more than one 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>Ore开发者_如何学运维gon</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>

Here is the result obtained :

Specific rows layout in a table


Sounds like you want rowgroups or colgroups. Rowgroups are created using <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

Then you might be able to place the groups side-by-side by changing the tbodys to display:table and floating them. This would give the appearance of side-by-side tables but still be semantically correct.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜