如何使HTML表格單元格流動到同一行中的其他單元格下方

Question

我有一張表格，我需要爲每列添加另一個單元格，並且由於該列上會包含很多元素，所以單元格內容必須在同一行中的其他單元格下方流動，填充表格中的所有可用寬度。這樣，列將不會被拉伸，從而無法查看其內容。

視覺例子可能幫助：http://www.asciiflow.com/#Draw9009157520507047228

編輯

閱讀所有我認識到，也許我沒有提供足夠的信息的答覆後。我很抱歉。

我想修改的表格是http://staging.locamotion.org/projects/pootle/中的表格。請注意，此表使用排序表 JavaScript庫對錶格進行排序。

我必須修改該表以顯示每個條目的標記信息。由於每個條目都可以有多個可以跨越很多空間的標籤，因此新列（必須繼續使用排序庫）必須在其他列下方流動，以允許顯示由於寬度而可以跨越一條或多條線的標籤填充限制（記住這個程序在第三世界國家使用的將是舊設備和低分辨率屏幕）。

有人問我試過了什麼。我嘗試添加每每個條目，只與跨度屬性一個單元一個附加行，但這樣的分類庫不起作用：

<table class="sortable"> 
    <thead> 
     <tr> 
      <th>Col 1</th> 
      <th>Col 2</th> 
      <th>Col 3</th> 
      <th>Col 4</th>     
     </tr> 
    </thead> 
    <tbody> 
     <tr class="even"> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td>     
     </tr> 
     <tr class="even"> 
      <td colspan="4">First entry tagging stuff</td> 
     </tr> 
     <tr class="odd"> 
      <td>5</td> 
      <td>6</td> 
      <td>7</td> 
      <td>8</td>     
     </tr> 
     <tr class="odd"> 
      <td colspan="4">Second entry tagging stuff</td> 
     </tr> 
     <!-- More and more entries --> 
    </tbody> 
</table> 

如果您對這個UI如何才能實現，而任何其他的想法保持列的順序，我將不勝感激。

我想再次道歉，也感謝那些花了一些時間試圖回答並盡我所能幫助我的人。

Answer 1

表格單元總是矩形，不能像您的圖像中描述的那樣「流動」。

您需要在DIV中嵌套表格，並使用CSS浮動來完成要查找的內容。

Answer 2

我不認爲這是可能的HTML。

您可以創建一個包含兩個單元格的左浮動表格的Div，然後將第三個單元格的內容作爲div的內容（在表格之後）。

<div> 
    <table><tr><td>First</td><td>Second</td></tr></table> 
    Third with a lot of content that might actually span under the table but it's not part of the table 
</div> 

像這樣：http://jsfiddle.net/9QS44/

Answer 3

可以使用行跨度從兩行合併的單元格，同樣使用合併單元格的列。你也可以結合rowspan和colspan。不知道你是否能夠達到你想要獲得的效果，但這是我知道能讓你接近的唯一方法。這也應該可以幫助你。 http://www.htmlcodetutorial.com/tables/index_famsupp_30.html

Answer 4

我同意以前的海報，HTML表格單元並不完全按照您想要的方式工作。這裏的另一種方式對皮膚的貓：

<style type="text/css" media="screen"> 

table { 
border-collapse:collapse; 
border:1px solid #FF0000; 
} 

table td{ 
border:1px solid #FF0000; 
} 
    table#child { 
     width:200px; float:left; 
    } 
    table#parent { 
     width:300px; 
     } 

</style> 
<table id="parent"> 
    <tr> 
     <td> 
      <table id="child"> 
       <tr> 
        <td>1</td> 
        <td>2</td>     
       </tr> 
      </table>Text that<br />wraps<br /> and wraps. 
     </td> 
    </tr> 
</table> 

可能要減少對孩子的表底的保證金數額，以及使文本換一點點接近。

如果是我，我會探索使用div來滿足這種特殊需求，並且完全忘記表格。