Почему последовательные элементы TABLE отображаются в новых строках в браузере?

Question

У меня есть 4 метки + радио-кнопки, которые я хочу отображать рядом друг с другом в одной строке:

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

Вместо этого каждая кнопка Label + находится на отдельной строке в браузере (Chrome илиMSIE 11).В HTML нет явных элементов новой строки.Почему они идут на свою линию и как мне их держать вместе?Это одна часть формы в продукте COTS.У меня нет полного контроля над сгенерированным HTML, CSS или JS.

В качестве вопроса о дополнительных бонусных баллах, почему jQuery автоматически добавляет элементы TBODY в мой TABLE?Я не делаю этого.

Вот HTML-код, который я генерирую с помощью jQuery:

<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 для достижения того же эффекта.