Блог

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

До сих пор я создал две строки, в которых созданы «text1», «text2» и «text3». В «text1» и «text3» td я указал rowSpan , чтобы он охватывал его, чтобы я мог поместить содержимое между следующей строкой внизу «text2».

Теперь проблема, с которой я сталкиваюсь, состоит в том, чтобы разделить Text4 и Text5 на отдельные столбцы.

Я попытался поместить вложенные tr и td в следующую строку, но из-за заполнения вокруг содержимого граница пересекается, и макет отображается неправильно.

Добавление фрагмента кода:

 <Tables bordered>
<tr>
    <td rowSpan={2}>
        text 1
        </td>
    <td >
        text 2
        </td>
    <td rowSpan={2}>
        text3
        </td>
</tr>
<tr>
    <td>
        <Container>
            <Row>
                <Col>
                    text4
                    </Col>
                <Col>
                    text5
                    </Col>
            </Row>
        </Container>
    </td>
</tr>
  

Любые рекомендации были бы полезны.

добавьте colspan="2" в ячейку, содержащую «текст 2», и сделайте ячейки, содержащие «text4» и «text5», обычными ячейками ( td ) без каких-либо атрибутов или дополнительной вложенности

В обычном HTML:

 table {
  border-collapse: collapse;
  min-width: 60%;
}

td {
  border: 1px solid #555;
  padding: 10px;
}  

 <table>
  <tr>
    <td rowspan="2">
      text 1
    </td>
    <td colspan="2">
      text 2
    </td>
    <td rowspan="2">
      text3
    </td>
  </tr>
  <tr>
    <td>
      text4
    </td>
    <td>
      text5
    </td>

  </tr>
</table>