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 :
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 tbody
s to display:table
and floating them. This would give the appearance of side-by-side tables but still be semantically correct.
精彩评论