0

I have a table with rows/columns inverted, as in HTML Table with vertical rows . I would like to divide some of the table cells in two.

HTML

<table border="1" class="test1">
<tbody>
<tr>
    <td>row 1, cell 1</td>
    <td>row 1 cell 2</td>
    <td> row 1 cell 3 </td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td><table><tr><td>row 2,</td><td> cell 2</td></tr></table></td>
    <td><table><tr><td>row 2,</td><td> cell 3</td></tr></table> </td>
</tr>
</tbody>
</table>

CSS

table.test1 >tbody > tr { display: block; float: left; }
table.test1 >tbody > tr > td { display: block; }

Note that I need to put tbody tag because some browsers add it automatically which could mess up my css instruction on direct children. This works fine for 2x2 table, but the alignment of the cells get messed up already for 2x3 table (and I need to do this for larger table). Is there any way to do this with CSS only? (I would rather avoid java script). Thank you in advance.

user43326
  • 101
  • 3

1 Answers1

0

Besides the fact that in most cases div container would make more sense you could use colspan for your table. This was introduced with HTML 4.01 was exactly designed for cases like this.

<table border="1" class="test1">
<tbody>
<tr>
    <td>row 1, cell 1</td>
    <td colspan="2">row 1 cell 2</td>
    <td colspan="2"> row 1 cell 3 </td>
</tr>
<tr>
    <td>row 2, cell 1</td>
    <td>row 2,</td>
    <td> cell 2</td>
    <td>row 2,</td>
    <td> cell 3</td>
</tr>
</tbody>
</table>
WebWorker
  • 413
  • 3
  • 9
  • Although this divides cells, it completely messes up the alignments. (Note that the columns and rows are inverted). – user43326 Jun 09 '19 at 16:17