如何格式化外部表而不是内部表答案

【问题标题】：How can I format outer table but not inner table如何格式化外部表而不是内部表
【发布时间】：2011-10-10 17:28:18
【问题描述】：

我有一个嵌套在另一个表中的表。我想给外部表格单元格一个边框，而不是内部表格单元格。除了所有正确的 css 和 html cmets，我如何设置外部单元格而不是内部单元格的样式？

css

#table1 td
{
    border: solid 1px black;
    padding: 5px;
}

html

<table id="table1">
    <tr>
        <td>Outer table</td>
        <td><table>
            <tr>
                <td>Inner table</td>
                <td></td>
            </tr>
            </table></td>
    </tr>
</table>

http://jsfiddle.net/kbVH2/

编辑

这是想要的效果，#table2 http://jsfiddle.net/kbVH2/4/

我可以执行以下操作，但我试图将其全部保存在 css 中。

<table id="table2" border="1">
    <tr>
        <td>Outer table</td>
        <td><table>
            <tr>
                <td>Inner table</td>
                <td></td>
            </tr>
            </table></td>
    </tr>
</table>

【问题讨论】：

继承的项目，我只是想修复一件事，我想尽可能少地改变并完成它。

标签： html css

【解决方案1】：

我会这样做：

#table1 td {
    border: solid 1px black;
}

#table1 table td {
    border: none;
}

现场演示： http://jsfiddle.net/kbVH2/3/

【讨论】：

【解决方案2】：

您可以尝试像这样使用child selector (>)：

#table1 > tbody > tr > td

jsFiddle Demo

请注意，在演示中我还添加了tbody 元素。如果你省略它，一些浏览器会自动添加它（比如我的 Chrome），其他浏览器可能不会，所以为了保持一致性，我通常会添加它以确保它不会破坏我的选择器。

我不会说这在所有情况下都是您的最佳选择，而是一种可能的选择。

注意： Internet Explorer 6 不支持子选择器。见Quirksmode CSS 2.1 Selectors Compatibility Table。

【讨论】：

使用这种方法浏览器兼容性有问题吗？只喜欢 IE7+？
IE6 不支持。我将此信息添加到我的答案中。

【解决方案3】：

#table1 td
{
    border: solid 1px black;
    padding: 5px;
}
#table1 td table td
{
 /*NORMAL INSIDE TABLE CSS HERE*/
}

将您希望内部表格执行的任何操作放入第二个选择器中。内表自动继承外表的css，但你可以覆盖它

【讨论】：

我根本不想为内表设置样式。我希望外表有边框，但内表保持不变。

【解决方案4】：

您是否尝试为它们提供不同的class ID 并从这些类中驱动 CSS？

【讨论】：

【解决方案5】：

#table1 tr td{
//The table 1 css
}
#table1 tr td table tr td
{
//The second table
}

这应该与第二张表完全相同！

【讨论】：