Столбец таблицы должен оставаться в одной строке (HTML / CSS / Javascript)

Question

Итак, у меня проблема с моей рейтинговой оценкой бизнес-возможностей для предпринимателя : Я бы хотел, чтобы переключатели оставались на одной линии. Проблема в том, что я не знаю, как мне следует обрабатывать, потому что если я задаю фиксированную минимальную ширину для ячейки, я не уверен, что она будет правильно отображаться в других браузерах, и если ячейка слишком большая, я теряю выравнивание кнопки радио.

У вас, ребята, есть трюк с CSS / Javascript (jQuery), который бы это исправил?

Спасибо

Answer 1

Это просто: просто добавьте white-space: nowrap; к своему тд.

Answer 2

Я бы изменил макет таблицы (обратите внимание, что это быстрое и грязное решение), чтобы разместить кнопки под метками (вы экономите место при меньших размерах окна).

<tr class="even">
  <td rowspan="2">Customer atlernatives</td>
  <td class="col_g left-aligned">A lot</td>
  <td class="col_d right-aligned">Few</td>
</tr>
<tr class="even">
  <td class="col_m centered">
    <form method="post" action="action" class="bz_op_val">
      <input type="radio" value="4" name="38">
      <input type="radio" value="3" name="38">
      <input type="radio" value="2" name="38">
      <input type="radio" value="1" name="38">
      <input type="radio" value="0" name="38">
    </form>
  </td>
</tr>

лучшее решение должно быть для меня:

<tr class="even">
  <td>Customer atlernatives</td>
  <td>
    <div class="col_g left-aligned">A lot</div>
    <div class="col_d right-aligned">Few</div>
    <form method="post" action="action" class="bz_op_val cleared-both-centered">
      <input type="radio" value="4" name="38">
      <input type="radio" value="3" name="38">
      <input type="radio" value="2" name="38">
      <input type="radio" value="1" name="38">
      <input type="radio" value="0" name="38">
    </form>
  </td>
</tr>