Выбрать только Прямой Ребенок из таблицы

Question

У меня есть таблица, в которой есть другой стол внутри. Мне нужно стилизовать основную таблицу, но оставить внутреннюю, как есть. Я попробовал вам селектор> CSS, но при этом стиль основной внутренней таблицы наследует все, что имеет основное.

HTML

<table id="main-table"> 
    <tbody> 
     <tr> 
      <td colspan="2">header</td> 
     </tr> 
     <tr> 
      <td> 
       <table id="inner-table"> 
        <tbody> 
         <tr> 
          <td >data</td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table> 

CSS

#main-table > tbody tr td{ 
    position: relative; 
    width: 300px; 
    height: 50px; 
    font-size: 15px; 
    background: #E6F4FF; 
    color: #035B9C; 
    padding: 10px; 
    box-sizing: border-box; 
    height: 60px; 
    border: 1px solid #E6F4FF; 
} 

Answer 1

Попробуйте это, используя прямые дочерние > для каждого из них.

#main-table > tbody > tr > td { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 50px; 
 
    font-size: 15px; 
 
    background: #E6F4FF; 
 
    color: #035B9C; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    height: 60px; 
 
    border: 1px solid #E6F4FF; 
 
} 
 

 
/* demo purposes */ 
 
td { 
 
    color: red; 
 
}

<table id="main-table"> 
 
    <tbody> 
 
    <tr> 
 
     <td colspan="2">header</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <table id="inner-table"> 
 
      <tbody> 
 
      <tr> 
 
       <td>data</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

коррекция:

#main-table > tbody > tr > td{ 
    position: relative; 
    width: 300px; 
    height: 50px; 
    font-size: 15px; 
    background: #E6F4FF; 
    color: #035B9C; 
    padding: 10px; 
    box-sizing: border-box; 
    height: 60px; 
    border: 1px solid #E6F4FF; 
}