html - 如何使 HTML 表格单元格在同一行中的其他单元格下方流动

Question

我有一个表格，我需要在其中每列添加另一个单元格，并且由于该列将有很多元素，单元格内容必须在同一行中的其他单元格下方流动，填充所有可用宽度在 table 上。这样，列就不会被拉伸(stretch)，从而无法查看其内容。

一个视觉示例可能会有所帮助:http://www.asciiflow.com/#Draw9009157520507047228

编辑

看完所有回复后，我意识到我可能没有提供足够的信息。抱歉。

我要修改的表是http://staging.locamotion.org/projects/pootle/中的那个.请注意，此表使用 sorttable JavaScript 库对表进行排序。

我必须修改该表以显示每个条目的标记信息。由于每个条目都可以有几个可以跨越很多空间的标签，新列(保持排序库工作所必需的)必须在其他列下方流动，以允许显示由于宽度可以跨越一行或多行的标记内容限制条件(请记住，该程序用于第三世界国家将使用旧设备和低分辨率屏幕)。

有人问我试过什么。我尝试为每个条目添加一个额外的行，其中只有一个单元格具有 colspan 属性，但这样排序库不起作用:

<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 float 来完成您要查找的内容。