Как установить цвет фона на внутренней таблицы только

Question

Допустим, что мой HTML-код:

<table> 
    <tbody> 
     <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     </tr> 
     <tr> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     </tr> 
     <tr> 
     <td> 
      <table> 
       <tbody> 
        <tr> 
        <td>A</td> 
        <td>B</td> 
        <td>C</td> 
        </tr> 
        <tr> 
        <td>D</td> 
        <td>E</td> 
        <td>F</td> 
        </tr> 
       </tbody> 
      </table> 
     </td> 
     </tr> 
    </tbody> 
</table> 

Я хочу рисовать только внутреннюю таблицу (A, B, C, D, E, F) на красный (фоновый цвет: красный)

Важно отметить - для целей нет «класса» или «идентификатора»! Я хочу, чтобы решение без него ...

Answer 1

этот селектор в основном означает: таблица внутри таблицы

table table{ 
 
    background-color: red; 
 
}

<table> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <table> 
 
       <tbody> 
 
        <tr> 
 
        <td>A</td> 
 
        <td>B</td> 
 
        <td>C</td> 
 
        </tr> 
 
        <tr> 
 
        <td>D</td> 
 
        <td>E</td> 
 
        <td>F</td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

Вы можете использовать table table { ... }. Это должно применяться только к таблицам, вложенным в другой тег таблицы. Или прямо table > tbody > tr > td > table { ... }.

Надеюсь, что это поможет,

Крис.

Answer 3

Используйте селектор, как:

table table { 
    background-color: red; 
} 

Перевод: таблица внутри таблицы.

Answer 4

table table td { 
 
background-color: red; 
 
}

<table> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <table> 
 
       <tbody> 
 
        <tr> 
 
        <td>A</td> 
 
        <td>B</td> 
 
        <td>C</td> 
 
        </tr> 
 
        <tr> 
 
        <td>D</td> 
 
        <td>E</td> 
 
        <td>F</td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 5

Сначала я не понял, как использовать п-й ребенок() psudeo класса. Я понимаю это сейчас. ниже код будет делать то, что вы просите.

Чтобы получить внутреннюю таблицу, вам необходимо получить доступ к внутренним строкам таблицы. На самом деле есть другие способы сделать это, используя n-ю формулу, но это самый простой, о котором я могу думать.

3 переводит на третью строку таблицы внутри исходного тега таблицы.

table tr:nth-child(3){ 
    background: red; 
} 

https://jsfiddle.net/USERALPHA32/ufjqgewa/1/

И это также будет делать то, что вы спрашиваете. Разница между этой скрипкой и выше является то, что это один будет иметь доступ к вложенной таблице непосредственно https://jsfiddle.net/USERALPHA32/ufjqgewa/3/

table tr table:nth-child(1){ 
    background: red; 
} 

__________________________ABOVE IS CORRECT__________________________________

__________________________BELOW IS WRONG____________________________________

, чтобы добраться до стола внутри таблицы вы бы сделали:

table:nth-child(2) { 
    background: red; 
} 

Я считаю, что вы можете использовать селектор nth-child. Хотя это может вызвать проблемы с поддержкой кросс-браузера.

https://www.sitepoint.com/web-foundations/nth-childn-css-selector/