将表格列拆分为两列（主行附加边框）答案

【问题标题】：split Table column's into two columns( borders attached to the main row)将表格列拆分为两列（主行附加边框）
【发布时间】：2021-01-29 21:08:18
【问题描述】：

我正在尝试使用引导表创建此布局：

到目前为止，我已经创建了两个行，其中创建了“text1”、“text2”和“text3”。在“text1”和“text3”td 中，我给了rowSpan 以跨越它，以便我可以将内容放在“text2”底部的下一行之间。

现在我面临的问题是将 Text4 和 Text5 拆分为单独的列。

我尝试将嵌套的 tr 和 td 放在下一行，但由于内容周围的填充，边框出现并且布局无法正确呈现。

添加代码sn-p：

<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>

任何指导都会有所帮助。

【问题讨论】：

标签： html bootstrap-4 html-table

【解决方案1】：

将colspan="2"添加到包含“text 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>

【讨论】：