1

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

一个视觉示例可能会有所帮助：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 有任何其他想法，我将不胜感激。

我想再次道歉，也感谢那些花时间尽力回答和帮助我的人。

4

4 回答 4

2

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

您需要在 DIV 中嵌套一个表格并使用 CSS 浮点数来完成您要查找的内容。

于 2013-07-24T20:10:00.820 回答
0

我认为这在 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/

于 2013-07-24T20:11:50.263 回答
0

您可以使用 rowspan 合并 2 行中的单元格，同样使用 colspan 合并列。您还可以将行跨度和列跨度结合起来。不确定您是否能够达到您想要获得的效果，但这是我知道的唯一能让您接近的方法。这也应该可以帮助你。http://www.htmlcodetutorial.com/tables/index_famsupp_30.html

于 2013-07-24T20:15:27.963 回答
0

我同意以前的海报，即 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 来满足这种特殊需求，而完全忘记表格。

于 2013-07-24T20:56:47.047 回答