如何使HTML表格单元格位于同一行中其他单元格的下方

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

一个直观的例子可能会有帮助：

编辑

在阅读了所有的回复后，我意识到也许我没有提供足够的信息。我道歉

我要修改的表是中的表。请注意，此表使用sorttableJavaScript库对表进行排序

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

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

有人问我尝试了什么。我尝试为每个条目添加额外的行，这只会使一个单元格具有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>

第1列
第2列
第3列
第4列
1.
2.
3.
4.
第一个条目标记的东西
5.
6.
7.
8.
第二项标签材料

如果您对如何在保持专栏顺序的同时实现此UI有任何其他想法，我将不胜感激

---

我想再次道歉，也要感谢那些花了一些时间试图回答我并尽可能帮助我的人。

表格单元格始终是矩形，不能像您的图像中所描述的那样“流动”

---

您需要在DIV中嵌套一个表，并使用CSS浮动来完成所需的操作。

我认为这在HTML中是不可能的

您可以创建一个Div，其中包含两个单元格的左浮动表，然后将第三个单元格的内容作为Div的内容（在表之后）

第一秒钟
第三，有很多内容实际上可能在表下跨越，但它不是表的一部分

---

类似于这样：

您可以使用rowspan合并两行的单元格，也可以使用colspan合并列。您还可以同时合并rowspan和colspan。不确定您是否能够达到您试图达到的效果，但这是我所知道的唯一能让您接近的方法。这也应该对您有所帮助。

我同意pre我们发现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>

桌子{
边界塌陷：塌陷；
边框：1px实心#FF0000；
}
表td{
边框：1px实心#FF0000；
}
表#儿童{
宽度：200px；浮动：左侧；
}
表#父表{
宽度：300px；
}
1.
2.

包装
和包装的文本。

可能还需要减少子表上的底部边距，以便文本环绕得更近一点

---

如果是我，我会尝试使用div来满足这一特殊需求，而完全忘记表。

发布有效链接或发布您尝试过的内容？我用更多数据更新了我的初始问题。我已经尝试使用colspan。我更新了我的问题，因为毕竟它没有我想象的那么清楚。如果不使用嵌套表，则不允许使用I update我用更详细的描述回答了我的问题。使用嵌套表的AFAICT将不允许使用我更新了我的初始问题，提供了我需要的更详细的描述，以及我迄今为止尝试的内容。