split Table column's into two columns( borders attached to the main row)

Question

I am trying to create this layout using Bootstrap Table:

So far I have created two rowrs in which "text1", "text2" and "text3" are created. In "text1" and "text3" td I have given rowSpan to span it so that I can put the content in between next row on bottom of "text2".

Now the problem i am facing is to split the Text4 and Text5 in seperate columns.

I have tried to put nested tr and td in next row but due to padding around the content, border is coming across and layout is not rendering properly.

Adding the code snippet:

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

Any guidance would be helpful.

Johannes Johannes · Accepted Answer · 2020-10-15T11:51:12

add colspan="2" to the cell that contains "text 2" and make the cells which contain "text4" and "text5" regular cells (td) without any attributes or extra nesting

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

split Table column's into two columns( borders attached to the main row)

1 Answers