以下是创建 2 行 3 列嵌套表的代码。
<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>
当前
预期
问题是创建了基表，而内部表中间有很多空格。我的要求是，如果有两行，并且前两行之间不应该有任何空格，如果前两行之后还有剩余空间。请参阅附图。 (第二张图片是缩放后的，请忽略缩放)
我想在不改 rebase 表高度的情况下做到这一点。即我希望基表高度仅为 400。 面临另一个问题，DoctorMick 的以下解决方案仅适用于 IE6，不适用于 Firefox 或 Mozilla。
最佳答案
首先，将顶行(在外表中)的高度设置为一个较低的数字(基本上仅用作其最小高度)，即
<tr style="height: 1">
然后在第二行(在外表中)设置vertical-align css属性，即
<tr style="vertical-align: top">
您可以从子表中删除align="top"。
完整示例...
<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>
关于javascript - HTML - 将行放入嵌套表中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9602474/