css - 带有嵌套表格的 table Css 样式

Question

我正在尝试使用特殊样式设置外表 (tbStudentPreference) 的第一列...

但问题在于，它不仅适用于外表列，而且适用于外表内的表。

我只想将我的样式应用到外部容器表。请帮忙。

<style>

        #tbStudentPreference td:first-child {
            font-weight: bold;            
            vertical-align: top;
            width: 100px;
        }

        #tbStudentPreference {
            vertical-align: top;
            padding: 3px;
        }
    </style>


<table id='tbStudentPreference'>
                <tr>
                    <td>xxxxx
                    </td>
                    <td>.....
                    </td>
                </tr>
                <tr>
                    <td>xxxxx
                    </td>
                    <td>.....
                    </td>
                </tr>
                <tr>
                    <td colspan='2'>
                        <table>
                            <tr>
                                <td>Inside Table
                                </td>
                                <td>.....
                                </td>
                            </tr>
                            <tr>
                                <td>Inside Table
                                </td>
                                <td>.....
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

Answer 1

I am trying to set the first column of the outer table..

你需要对内表取反。

此外，浏览器会自动为您添加一个tbody，因此直接在tr 上使用子组合器是不够的。您需要使用 tbody 上的子组合器覆盖它。然后，您可以使用 colspan 属性来否定内部表。

因此，您选择 td，它是 不 具有 colspan 的第一个 child 属性，tr 的直接后代，它本身是 tbody 的直接后代，而 tbody 本身是 table 的直接后代。像这样:

#tbStudentPreference > tbody > tr > td:not([colspan]):first-child {...

否定伪类:https://developer.mozilla.org/en-US/docs/Web/CSS/:not

片段:

#tbStudentPreference { border: 1px solid gray; border-collapse: collapse; }
#tbStudentPreference td { border: 1px solid gray; }

#tbStudentPreference > tr > td:not([colspan]):first-child {
    font-weight: bold; color: red;
}
#tbStudentPreference > tbody > tr > td:not([colspan]):first-child {
    font-weight: bold; color: red;
}

<table id='tbStudentPreference'>
    <tr><td>xxxxx</td><td>.....</td></tr>
    <tr><td>xxxxx</td><td>.....</td></tr>
    <tr><td colspan='2'>
        <table>
            <tr><td>Inside Table</td><td>.....</td></tr>
            <tr><td>Inside Table</td><td>.....</td></tr>
        </table>
    </td></tr>
</table>