如何强制两个元素始终保持在<td>中的同一行？

Question

这段代码非常简单：

<table id="tabel_user" style="width: 100%; border: 0; background-color: white;" cellpadding="0" cellspacing="0">
<tr>
    <td style="border: 0; padding: 0; padding-left: 5px;">
        <label for="abcd"><input class="check_useri" id="abcd" name="abcd" type="checkbox" /> abcd </label>
    </td>
</tr>
</table> 

除非标签中的文本变得非常长且表格需要拉伸以容纳它，否则复选框和标签将整齐地保持在同一行。但有时文本会被迫移到复选框下方。我该如何防止这种情况发生？

- Bogdan

Answer 1

你可以使用CSS属性white-space来强制内联元素保持在同一行上：

<td style="white-space:nowrap;">
  this content will not be wrapped
</td>

- Lukas Eder

Answer 2

这段代码工作正常，并且具有响应式设计：

table {
width:100%;
display: inline-block;
}
td, th {
max-width:100%
}

- Pablo Molina

Answer 3

定义一个white-space可能是完成它的一种方式，但作为表格数据，最好固定标签的最大宽度。

label { width: 100px; display: inline-block; }

- Starx

Answer 4

你可以使用这个：<tr valign="top">。这将使垂直对齐到顶部。

- Sam Brooks

---

你在2013年提供的解决方案已经过时了（已被CSS样式取代）？ - trejder

提问者询问了关于表格的问题，为什么你要责备回答者没有使用CSS？直到今天，表格和表格元素属性仍然做一些用CSS难以实现的事情。 - Alkanshel

@Amalgovinus valign在HTML5中不被支持，因此它甚至无法工作。 - Thomas Boby

它已经被弃用了，但据我所知，支持并没有被取消 - 而像这样的属性仍然对于诸如HTML电子邮件之类的事情至关重要，在其中定位CSS很少可用。如果需要，他们可以使用等效的vertical-align CSS属性。CSS3并没有完全取代老式表格。 - Alkanshel