我的HTML页面在td内有tr内的表格和2个内部表格。我遇到的问题是在两个表中的值在字符值方面不同的情况下的位移。这是我的页面：
<html>
<head>
</head>
<body>
<table>
<tr>
<td>1st input field</td>
</tr>
<tr>
<td>
<table style="width: 100%">
<tr>
<td>All:</td>
<td>500</td>
<td>$</td>
</tr>
<tr>
<td>part1:</td>
<td>100</td>
<td>$</td>
</tr>
<tr>
<td>part2:</td>
<td>140</td>
<td>$</td>
</tr>
<tr>
<td>part3:</td>
<td>260</td>
<td>$</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2nd input field</td>
</tr>
<tr>
<td>
<table style="width: 100%">
<tr>
<td>All:</td>
<td>700</td>
<td>$</td>
</tr>
<tr>
<td>part1:</td>
<td>200</td>
<td>$</td>
</tr>
<tr>
<td>part2:</td>
<td>200</td>
<td>$</td>
</tr>
<tr>
<td>part3:</td>
<td>300</td>
<td>$</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
现在让我们说第一个内部表属性都有7个字符：
<html>
<head>
</head>
<body>
<table>
<tr>
<td>1st input field</td>
</tr>
<tr>
<td>
<table style="width: 100%">
<tr>
<td>All:</td>
<td>500.123</td>
<td>$</td>
</tr>
<tr>
<td>part1:</td>
<td>100</td>
<td>$</td>
</tr>
<tr>
<td>part2:</td>
<td>140</td>
<td>$</td>
</tr>
<tr>
<td>part3:</td>
<td>260</td>
<td>$</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2nd input field</td>
</tr>
<tr>
<td>
<table style="width: 100%">
<tr>
<td>All:</td>
<td>700</td>
<td>$</td>
</tr>
<tr>
<td>part1:</td>
<td>200</td>
<td>$</td>
</tr>
<tr>
<td>part2:</td>
<td>200</td>
<td>$</td>
</tr>
<tr>
<td>part3:</td>
<td>300</td>
<td>$</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
值得庆幸的是，第一张表中的每一个值都是＃34;在左边，但在第二个表中值保持在其位置。我该怎么改变它？
答案 0 :(得分：2)
好吧，我需要重新设计您的代码，我删除了子表并将colspan添加到标题。虽然我不确定为什么你需要使用另一张桌子作为孩子。
<table>
<tr>
<td colspan="3">1st input field</td>
</tr>
<tr>
<td>
<tr>
<td>All:</td>
<td>500.123</td>
<td>$</td>
</tr>
<tr>
<td>part1:</td>
<td>100</td>
<td>$</td>
</tr>
<tr>
<td>part2:</td>
<td>140</td>
<td>$</td>
</tr>
<tr>
<td>part3:</td>
<td>260</td>
<td>$</td>
</tr>
</td>
</tr>
<tr>
<td colspan="3">2nd input field</td>
</tr>
<tr>
<td>
<tr>
<td>All:</td>
<td>700</td>
<td>$</td>
</tr>
<tr>
<td>part1:</td>
<td>200</td>
<td>$</td>
</tr>
<tr>
<td>part2:</td>
<td>200</td>
<td>$</td>
</tr>
<tr>
<td>part3:</td>
<td>300</td>
<td>$</td>
</tr>
</td>
</tr>
</table>
答案 1 :(得分：1)
这里的原因是您没有为表格单元格设置大小。其中包含数字500.123的单元格具有更大的宽度，因此列变得更宽，然后在第二个表格中。您可以使用简单的CSS来解决问题，只需设置一些类，然后将它们设置为一定的宽度。
td {
border: 1px solid black;
}
tr td:first-child {
width: 40px;
}
tr td:nth-child(2) {
width: 50px;
}<html>
<head>
</head>
<body>
<table>
<tr>
<td>1st input field</td>
</tr>
<tr>
<td>
<table style="width: 100%">
<tr>
<td>All:</td>
<td>500.123</td>
<td>$</td>
</tr>
<tr>
<td>part1:</td>
<td>100</td>
<td>$</td>
</tr>
<tr>
<td>part2:</td>
<td>140</td>
<td>$</td>
</tr>
<tr>
<td>part3:</td>
<td>260</td>
<td>$</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2nd input field</td>
</tr>
<tr>
<td>
<table style="width: 100%;">
<tr>
<td>All:</td>
<td>700</td>
<td>$</td>
</tr>
<tr>
<td>part1:</td>
<td>200</td>
<td>$</td>
</tr>
<tr>
<td>part2:</td>
<td>200</td>
<td>$</td>
</tr>
<tr>
<td>part3:</td>
<td>300</td>
<td>$</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>