admin管理员组文章数量:1391969
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>
本文标签： javascriptHTMLplacing rows in a nested tableStack Overflow
版权声明：本文标题：javascript - HTML - placing rows in a nested table - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744713504a2621266.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论