Question

我有一个表格，我需要在其中为每列添加另一个单元格，并且由于该列上将包含许多元素，因此单元格内容必须在同一行中的其他单元格下方流动，填充所有可用宽度在桌子上。这样，列不会被拉伸，因此无法查看其内容。

可视化示例可能有所帮助：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

表格单元格总是长方形，不能流动＃34;如图所示。

您需要在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合并来自2行的单元格，对于使用colspan的列也可以合并。您还可以将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来满足这种特殊需求并完全忘记表格。

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

4 个答案: