2011-03-15 29 views
0

有沒有辦法控制中的流程管理?表格中的特定行佈局

而不是垂直流動,我想按給定的數字將它們分組並顯示組並排。

這(非標準)的HTML代碼示出了預期的結果時,組大小爲3,但使用多於一個

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

下面是所獲得的結果:

Fake horizontal rows flow layout

+0

你這樣做的方式有什麼問題? – JohnP

+1

如果我正在閱讀這個權利:堅持使用多個表。請參閱:http://stackoverflow.com/questions/5091503/how-can-i-make-display-block-work-on-a-td-in-ie/5091822#5091822 - 你(afaik)不能浮動IE7中的表格單元格。你需要IE7支持嗎? – thirtydot

+0

@JohnP:事實上,這種方式本身並不存在問題,但是如果一個標準的HTML/CSS選項存在,它將更加靈活,並且不會因表格而導致HTML代碼混亂,因此解析瀏覽器並使用Javascript進行操作,例如使用JQuery;此外,生成這種佈局所需的服務器端代碼將非常直接,然後顯而易見。 – Pragmateek

回答

1

聽起來像你想rowgroupscolgroups。 Rowgroups使用<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

那麼你也許可以通過改變tbody s到display:table和浮動他們的組並排面放到創建。這將使並排表的外觀,但仍然是在語義上是正確的。

+1

實際上,如果Outlook是目標,那麼這個幻想就沒有用。抱歉。 – SpliFF

+0

感謝這個有用的答案;它並不像我期望的那麼簡單,我特別希望能夠只聲明一次列標題,但比多表解決方案更清晰。 – Pragmateek