Создание таблицы Bootstrap с различными угловыми компонентами

Question

Я пытаюсь создать таблицу Bootstrap, используя два угловых компонента.

Мой код организован следующим образом:

componentA.html
<table class="table table-bordered">
<thead>
<tr>
  <th scope="col">#</th>
  <th scope="col">First</th>
  <th scope="col">Last</th>
  <th scope="col">Handle</th>
</tr>
</thead>
 <tbody>
  <componentB></componentB>
 </tbody>
</table>



componentB.html
<tr>
 <th scope="row">1</th>
 <td>Mark</td>
 <td>Otto</td>
 <td>mdo</td>
</tr>

Результат должен быть таким:

но на самом деле это так:

Тем не менее, он работает нормально, когда я помещаю HTML-содержимое componentB непосредственно в html componentA.

Спасибо за вашу помощь

Answer 1

<table class="table table-bordered">
<thead>
<tr>
    <th scope="col">#</th>
    <th scope="col">First</th>
    <th scope="col">Last</th>
    <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
</tr>
</tbody>

Answer 2

Вам не хватает области видимости в теге tr: <th scope="row">1</th>

Тогда элемент таблицы в HTML просто позволяет thead, tbody, tfoot и tr быть дочерними.

Измените ваш селектор componentB с 'componentB' на '[componentB]'

<table class="table table-bordered">
<thead>
<tr>
  <th scope="col">#</th>
  <th scope="col">First</th>
  <th scope="col">Last</th>
  <th scope="col">Handle</th>
</tr>
</thead>
 <tbody componentB>
 </tbody>
</table>