这个应该非常容易解决。我有以下代码不能按照我希望的方式工作。目的是得到这样的东西，“1 2 3 4桌子”右边的按钮：
1 2 BUTTON
3 4
但我得到的几乎与按钮作为第3行相同。我错过了什么？
<tr>
<td>
<tr>
<td>1 </td>
<td>2 </td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
</tr>
</td>
<td>
<div class="but">
<input type="button" class="button" value="BUTTON" />
</div>
</td>
</tr>
答案 0 :(得分：1)
您应该将按钮移动到第一个表格行。您的HTML无效 - 您无法将<tr>放入<td>，反之亦然。来自the specification：
Contexts in which this element can be used：
作为thead元素的孩子。
作为tbody元素的孩子。 作为tfoot元素的孩子。 作为table元素的子元素，在任何caption，colgroup和thead元素之后，但仅当没有tbody个元素属于table元素。
查看我的代码段：
td {
padding: 5px 20px;
}<table>
<tr>
<td>1 </td>
<td>2 </td>
<td>
<div class="but">
<input type="button" class="button" value="BUTTON" />
</div>
</td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
<td></td>
</tr>
</table>
答案 1 :(得分：1)
如果你想拥有一个内部表，它需要自己的一组<table>标签：
<table>
<tr>
<td>
<table>
<tr>
<td>1 </td>
<td>2 </td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
</tr>
</table>
</td>
<td>
<div class="but">
<input type="button" class="button" value="BUTTON" />
</div>
</td>
</tr>
</table>
否则，您的“内部”tr实际上被视为外部表中的第二行和第三行，从而导致置换。在包含数字的行之后，包含该按钮的td会出现在新行中。结果是一个缺少<tr>开始标记和一些意外<td> / </td>标记的表格。这是您的原始标记重新缩进和“固定”（包括外部<table> / </table>标记，无论出于何种原因未在问题中显示），以向您展示我的意思：
<table>
<tr>
<td>
<tr>
<td>1 </td>
<td>2 </td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
</tr>
<tr>
<td>
<div class="but">
<input type="button" class="button" value="BUTTON" />
</div>
</td>
</tr>
</table>
请注意，<tr>和<td>具有可选的结束标记，这意味着即使第一个tr和td缺少其结束标记，上面的标记也完全有效，这就是为什么你的原始标记按原样处理的原因。
答案 2 :(得分：1)
您已将eveything包含在一个<tr>标记内。您需要2个单独的<tr>标记，即2行，按钮应位于<table>标记之外。
然后使用 CSS ，您需要将表格和按钮的display设置为inline-block，然后使用 CSS的position属性，您可以将按钮定位到所需位置。
由于您还希望表格的两列之间有一些空格，您可以使用 在表格的两列之间添加一些空格。
要在表格和按钮之间添加一些空格，请在按钮的左侧中添加一些padding
.but{
display: inline-block;
position: relative;
top: -30px;
padding-left: 40px;
}
table{
display: inline-block;
}<table>
<tr>
<td>1</td>
<td>  </td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>  </td>
<td>4</td>
</tr>
</table>
<div class="but">
<input type="button" class="button" value="BUTTON" />
</div>