Question

我正在尝试创建一个主详细信息表，其中一行将包含子对象的详细信息。例如，我们可以有一个客户，当您点击一行时，它会展开以显示客户的订单。 html可能看起来像这样：

<table id="report">
    <tr>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
    </tr>
    <tr>
        <td colspan="4">
            <!-- Details here -->  
        </td>
    </tr>
</table>

跨浏览器兼容性的最佳html / css是什么？我需要支持IE6。我想避免在里面放一张内表。如果我使用无序列表，我可以使用css来获得漂亮的网格效果吗？

Answer 1

您可以使用UL或DIV来获取网格效果，方法是将每一行放在LI标记中，并使用与表格列宽度相同的浮动块元素（如DIV）填充LI。

<ul>
<li>
<div style="float: left; width: 100px">item1</div>
<div style="float; width: 120px;">item2</div>
...
</li>
...

但是你必须精确地测量浮动的DIV到像素，否则它们可能会缠绕并打破整个布局。此外，如果容器div调整大小，它可能会中断。您可以对每个LI应用clear =“both”以最大限度地减少破损。

请注意，如果您在浮动div上使用任何边距，他们将受到ie6中双边距错误的影响。

但这不是UL的用途。如果您正在尝试遵循使用表格来避免任何事情的现代趋势，您应该考虑这正是表格应该显示的表格数据的类型：数据的行和列。使用表格在语义上是正确的，我不能想到不使用表格的任何优点。

更不用说如果ie6兼容性（不幸的是，可耻地）是项目规范的一个重要部分，那么就忘记了超现代化并且只使用传统的工作表。

理想情况下，我会停止使用colspan =“4”并让您的动态代码假设它将嵌套在4列表中，并且只是遍历表行。正如Jeremy B在评论中所说，无论如何你已经有了一张桌子。

内部html为主细节表

1 个答案: