为什么在浏览器的新行上显示顺序 TABLE 元素？

Question

我有 4 个标签 + 单选按钮，我想在同一行并排显示：

+--------+ +--------+ +--------+ +--------+
|  NONE  | |   NO   | |   Yes  | |  N/A   |
+--------+ +--------+ +--------+ +--------+
| Button | | Button | | Button | | Button |
+--------+ +--------+ +--------+ +--------+

相反，每个 Label + Button 都会在浏览器（Chrome 或 MSIE 11）中单独一行。 HTML 中没有明确的换行元素。为什么他们要走自己的路线，我如何让他们在一起？ 这是 COTS 产品中表格的一部分。我无法完全控制生成的 HTML、CSS 或 JS。

作为一个额外的加分问题，为什么 jQuery 会自动在我的 TABLE 中添加 TBODY 元素？我不这样做。

这是我用 jQuery 生成的 HTML：

<span id="F1538.wrapper" class="fieldWidget">
       <table><tbody>
          <tr><td><label for="F1538">(None)</label></td></tr>
          <tr><td><input type="radio" name="F1538" value="0" checked="checked"></td></tr>
       </tbody></table>
       <table><tbody>
          <tr><td><label for="F1538">No</label></td></tr>
          <tr><td><input type="radio" name="F1538" value="782"></td></tr>
       </tbody></table>
       <table><tbody>
          <tr><td><label for="F1538">Yes</label></td></tr>
          <tr><td><input type="radio" name="F1538" value="783"></td></tr>
       </tbody></table>
       <table><tbody>
          <tr><td><label for="F1538">N/A</label></td></tr>
          <tr><td><input type="radio" name="F1538" value="784"></td></tr>
       </tbody></table>
    </span>

Answer 1

这不是表格的工作方式。

首先，每个<table> 都是一个块元素，所以除非明确告知不要这样做，否则表格之后的下一个元素将显示在其下方。

在表格中，每个<tr> 代表一个表格行（它们相互堆叠）。在每一行中，每个<td> 代表该行的一列（它们在该行中彼此相邻显示）。

如果你真的想使用<table>，你必须把标签放在第一个<tr>，然后把所有的按钮放在第二个。

您可能想要探索其他选项（大多数人会说您绝对应该这样做，因为从语义上讲，这不是表格的用途）。您可以使用 4 个 divs，每个都包含标签 + 按钮，并使它们彼此相邻 float，或者使用 flex 达到相同的效果。