Following is the code for creating a nested table for two rows by 3 columns.
<html>
<body>
<h4>Two rows and three columns:</h4>
<table border="1" width="100%" height="400" align="top">
<tr>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>1-3</td>
<td>1-4</td>
</tr>
</table>
</td>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>2-3</td>
<td>2-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
<tr>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</td>
</tr>
<tr>
</td>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>4-1</td>
<td>4-2</td>
</tr>
<tr>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>5-1</td>
<td>5-2</td>
</tr>
<tr>
<td>5-3</td>
<td>5-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>6-1</td>
<td>6-2</td>
</tr>
<tr>
<td>6-3</td>
<td>6-4</td>
</tr>
</table>
</body>
</html>
CURRENT
EXPECTED
The problem is the base table gets created and the inner tables are having a lot of spaces in the middle. My requirement is that if two rows are there and there shouldnt be any space between first two rows ,if there is any space left that can be after the first two rows. Please refer to the attached image. (second image is a scaled one , please ignore the scaling)
I wanted to do it without changing the base tables height. i.e. I want the base table height to be 400 only. Facing another issue the below solution by DoctorMick , it works only on IE6 Not on Firefox or Mozilla.
Following is the code for creating a nested table for two rows by 3 columns.
<html>
<body>
<h4>Two rows and three columns:</h4>
<table border="1" width="100%" height="400" align="top">
<tr>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>1-3</td>
<td>1-4</td>
</tr>
</table>
</td>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>2-3</td>
<td>2-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
<tr>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</td>
</tr>
<tr>
</td>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>4-1</td>
<td>4-2</td>
</tr>
<tr>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>5-1</td>
<td>5-2</td>
</tr>
<tr>
<td>5-3</td>
<td>5-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>6-1</td>
<td>6-2</td>
</tr>
<tr>
<td>6-3</td>
<td>6-4</td>
</tr>
</table>
</body>
</html>
CURRENT
EXPECTED
The problem is the base table gets created and the inner tables are having a lot of spaces in the middle. My requirement is that if two rows are there and there shouldnt be any space between first two rows ,if there is any space left that can be after the first two rows. Please refer to the attached image. (second image is a scaled one , please ignore the scaling)
I wanted to do it without changing the base tables height. i.e. I want the base table height to be 400 only. Facing another issue the below solution by DoctorMick , it works only on IE6 Not on Firefox or Mozilla.
Share Improve this question edited Mar 7, 2012 at 15:02 m4n07 asked Mar 7, 2012 at 13:34 m4n07m4n07 2,29713 gold badges51 silver badges66 bronze badges4 Answers
Reset to default 3Firstly, set the height of the top row (in the outer table) to a low number (which will basically just be used as it's minimum height), i.e.
<tr style="height: 1">
and then set the vertical-align css property on the second row (in the outer table), i.e.
<tr style="vertical-align: top">
You can remove the align="top" from the sub table.
Full example...
<html>
<body>
<h4>Two rows and three columns:</h4>
<table border="1" width="100%" height="400" align="top">
<tr style="height: 1">
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>1-3</td>
<td>1-4</td>
</tr>
</table>
</td>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>2-3</td>
<td>2-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
<tr>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</td>
</tr>
<tr style="vertical-align: top">
<td>
<table width="100%" border="2" height ="100">
<tr>
<td>4-1</td>
<td>4-2</td>
</tr>
<tr>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100">
<tr>
<td>5-1</td>
<td>5-2</td>
</tr>
<tr>
<td>5-3</td>
<td>5-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100">
<tr>
<td>6-1</td>
<td>6-2</td>
</tr>
<tr>
<td>6-3</td>
<td>6-4</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Try to set VALIGN = TOP style to the inner table. If it doesn't help, then set vertical alignment for the row.
Use this css:
table{border-layout:fixed;border-spacing=0}
td{vertical-align:top;}
Use cellpadding attribute to make the table as you expect. for example use like this
<table border="1" cellpadding="10">
<tr><td></td>
</tr>
</table>