Question

我有一个嵌套在另一个表中的表。我想给外表单元格一个边框，但不是内表格单元格。除了所有正确的CSS和HTML注释外，我如何设计外部单元格而不是内部单元格？

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>

Answer 1

我就是这样做的：

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

#table1 table td {
    border: none;
}

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

Answer 2

您可以尝试使用child selector（>），如下所示：

#table1 > tbody > tr > td

jsFiddle Demo

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

我不会说这是你在任何情况下的最佳选择，但可能是另一种选择。

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

Answer 3

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

在第二个选择器中放置你想要的内部表。内部表自动继承外部的css，但你可以覆盖它

Answer 4

您是否尝试过给他们不同的class ID并从这些类中驱动CSS？

Answer 5

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

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

如何格式化外表而不是内表

5 个答案: