Блог

Главная - Вопросы по программированию - Почему вложенная таблица отображается вне родительской таблицы?

Почему вложенная таблица отображается вне родительской таблицы?

#html #css #html-table #css-tables

#HTML #css #html-таблица #css-таблицы

Вопрос:

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

Вот ссылка на CodePen: https://codepen.io/specificporpoise/pen/JjrXdMM

HTML:

 <div id="outer">

  <table id="parent">
    <tbody>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>D</td>
        <td>E</td>
        <td>H</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>D</td>
        <td>E</td>
        <td>H</td>
      </tr>
      <tr>
        <table id="nested">
          <tr>
            <td>I</td>
            <td>J</td>
          </tr>
        </table>
      </tr>
    </tbody>
  </table>

</div>

CSS:

 div {
  border: solid 1px gray;
}
table {
  table-layout: fixed;
}
table td {
  border: solid 1px gray;
}
#outer {
  width: 800px;
  height: 600px;
}
#parent {
  width: 100%;
  height: 100%;
}
#nested {
  width: 100%;
  height: 100%
  table-layout: fixed;
}

Что я упускаю из виду?

Ответ №1:

Вам нужно добавить атрибут colspan к td, который содержит вложенную таблицу.

       <tr>
        <td colspan="5"><!-- add colspan -->
            <table id="nested">
              ...
            </table>
        </td>
      </tr>
 
 div {
  border: solid 1px gray;
}
table {
  table-layout: fixed;
}
table td {
  border: solid 1px gray;
}
#outer {
  width: 800px;
  height: 600px;
}
#parent {
  width: 100%;
  height: 100%;
}
#nested {
  width: 100%;
  height: 100%
  table-layout: fixed;
} 
 <div id="outer">

  <table id="parent">
    <tbody>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>D</td>
        <td>E</td>
        <td>H</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>D</td>
        <td>E</td>
        <td>H</td>
      </tr>
      
      <tr>
        <td colspan="5">
        <table id="nested">
          <tr>
            <td>I</td>
            <td>J</td>
          </tr>
        </table>
        </td>
      </tr>
    </tbody>
  </table>

</div>

Метки: