时间戳

首页 > 解决方案 > 为什么在浏览器的新行上显示连续的 TABLE 元素？

javascript - 为什么在浏览器的新行上显示连续的 TABLE 元素？

问题描述

我有 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>

标签： javascripthtmljquerycsshtml-table

解决方案

这不是桌子的工作方式。

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

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

如果您真的想使用 a <table>，则必须将标签放在第一个中<tr>，将所有按钮放在第二个中。

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

推荐阅读