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>