javascript HTML - 在嵌套表中放置行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9602474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML - placing rows in a nested table
提问by m4n07
Following is the code for creating a nested table for two rows by 3 columns.
以下是为两行 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>
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.
我想在不改变基表高度的情况下做到这一点。即我希望基表高度仅为 400。 面对以下 DoctorMick 解决方案的另一个问题，它仅适用于 IE6，不适用于 Firefox 或 Mozilla。
回答by DoctorMick
Firstly, 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.
然后在第二行（在外表中）设置vertical-align css属性，即
<tr style="vertical-align: top">
You can remove the align="top" from the sub table.
您可以从子表中删除 align="top"。
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>
回答by amd
Use this css:
使用这个css：
table{border-layout:fixed;border-spacing=0}
td{vertical-align:top;}
回答by Andriy Budzinskyy
Try to set VALIGN = TOP style to the inner table. If it doesn't help, then set vertical alignment for the row.
尝试将VALIGN = TOP 样式设置为内表。如果没有帮助，则为该行设置垂直对齐方式。
回答by Gowti
Use cellpadding attribute to make the table as you expect. for example use like this
使用 cellpadding 属性按照您的预期制作表格。例如像这样使用
<table border="1" cellpadding="10">
<tr><td></td>
</tr>
</table>
