How can I split 3 columns into 2 evenly?

Question

I have the following React JSX code for a table:

 <table> <tr> <td>col1</td> <td>col2</td> <td>col3</td> </tr> </table>

And I want to add a footer with 2 columns filling up the entire width but I'm having trouble doing that. I tried colspan but its not working as expected. How can I do this?

Answer 1

You can do this with colspan, all you need to take into account is that colspan should be integers (1,2,3) and cannot have something like 1.5.

So the trick is to also use colspan in your first row and give them all a colspan of 2, such that the total is 6 which you can divide by two columns of 3.

 <table border="1"> <tr> <td colspan="2">col1</td> <td colspan="2">col2</td> <td colspan="2">col3</td> </tr> <tr> <td colspan="3">footer1</td> <td colspan="3" >footer2</td> </tr> </table>

Answer 2

Just colspan your footer cell on all the 3 cells. Then add a separate table within that footer table and make 2 columns. Don't forget to make that inner table as lean as possible (no border, no margin, .. as you need it)

 <table border="1"> <tr> <td>col1</td> <td width="400">col2</td> <td>col3</td> </tr> <tr> <td colspan="3"> <table width="100%"> <tr> <td width="50%">footer left</td> <td width="50%">footer right</td> </tr> </table> </td> </tr> </table>