I want to create a div layout which is similiar to the following table result:
<html>
<head>
<title>Basic</title>
<style>
table { border: 1px solid;}
</style>
</head>
<body>
<table style="border: 1px solid;">
<tr>
<td> Asia</td>
<td>
<table>
<tr>
<td>South Asia</td>
</td>
<td><table>
<tr>
<td>Republic</td>
<td><table>
<tr><td>Singapore</td></tr>
<tr><td>India</td></tr>
</table></td>
</tr>
<tr>
<td>Monarchy</td>
<td><table>
<tr><td>Bhutan</td></tr>
<tr><td>Nepal</td></tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td>East Asia</td>
<td><table>
<tr>
<td>Republic</td>
<td><table>
<tr><td>China</td></tr>
<tr><td>South Corea</td></tr>
</table></td>
</tr>
<tr>
<td>Constitutional Monarchy</td>
<td><table>
<tr><td>something</td></tr>
<tr><td>Japan</td></tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
I managed to replicate this with some effort. The problem is that I want the names of the countries to be in a column or if you will - the containers for the government types to be the same width so other containers will align.
If I don't do it in nested containers (in the example - nested tables) the rows will get displaced. Currently rows are shown exactly how I want them - the text is in the vertical middle of the what they refer to.
Only thing that comes up to my mind is to set the text in the same columns as class=column1, class=column2, etc. and then somehow define the width for the column classes. Problem is the data is defined dynamically and I can't say how much pixels or % of the page I can give to a column, I just need it to stretch with the text.
This is my first time I ask about help here so if I am doing it wrong, tell me how do improve my inquiry.
