Может ли кто-то быть внутри другого?

Возможно ли иметь внутреннее тело внутри внешнего тела следующим образом:

вот пример css:

  <style type="text/css">
    .class1 {background-color:#ff0000;}
    .class2 {background-color:#00ff00;}
  </style>

Вот пример HTML

<table>
  <tbody id="outer" class="class1">
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tbody id="inner" class="class2">
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody> <!-- inner -->
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody> <!-- outer -->
</table>

Моя цель - применить CSS1 класса к внешнему телу и классу2 ко внутреннему телу. Но последний TR считается находящимся вне внешнего тела, поскольку я хочу, чтобы он находился внутри внешнего тела.

Как я могу это сделать?

Ответ 1

Хотя это может работать на практике, это не легальный HTML.

Однако вам разрешено иметь несколько элементов TBODY в одном элементе TABLE, чтобы вы могли сделать это:

<table> 
  <tbody class="show"> 
    <tr> 
      <td>...</td> 
      <td>...</td> 
    </tr> 
  </tbody>
  <tbody class="hide"> 
    <tr> 
      <td>...</td> 
      <td>...</td> 
    </tr> 
  </tbody>
  <tbody class="show"> 
    <tr> 
      <td>...</td> 
      <td>...</td> 
    </tr> 
  </tbody>
</table>

В качестве альтернативы вы можете вставлять таблицы, хотя я бы не рекомендовал этого.

Ответ 2

Путь к созданию другой таблицы и последующему использованию tbody:

<table>
  <tbody id="outer" class="show">
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td colspan="2">
         <table>
        <tbody id="inner" class="hide">
         <tr>
           <td>...</td>
           <td>...</td>
         </tr>
       </tbody> <!-- inner -->
         </table>
      </td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody> <!-- outer -->
</table>

Ответ 3

Нет, это невозможно. Согласно спецификации, элемент TBODY может содержать только элементы TR.

<!ELEMENT TBODY    O O (TR)+           -- table body -->

чего вы хотите достичь?

Ответ 4

Скорее всего. Если все, что вы хотите, это "различить" некоторый набор строк, я бы присвоил класс inner каждой строке, о которой идет речь (вместо tbody). Затем вы легко манипулируете этими строками с помощью любой инфраструктуры js, например $('tr.inner').show();.

Ответ 5

Я боюсь, вы не сможете этого сделать.

В соответствии с W3C не может находиться внутри другого.