tableCss风格嵌套表

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

我想设置外部表的第一列..

您需要否定内部表。

此外，浏览器会自动为您添加tbody，因此仅在tr上直接使用子组合器是不够的。您需要用tbody上的子组合器覆盖该值。然后通过使用colspan属性的存在否定内表。

所以，你选择td是那些具有tr一个colspan属性，嫡系这本身就是tbody嫡系这本身就是你的table的嫡系这是not之间的first-child。就像这样：

#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>