Горизонтальное выравнивание строк таблицы с помощью CSS или JavaScript

Question

Я застрял с моей компанией CRM для создания опросов.Я могу настроить JavaScript и CSS для опроса, но не для ненужного HTML-кода, который он выдает.

Я пытаюсь получить ответы на вопросы опроса в виде диапазона.

Пример:

Но я не могу нацелить ответы, чтобы применить атрибут display: inline или float: left.

См.HTML-код, который я не могу редактировать ниже.

<div class="QuestionContainer"
    id="cont_id_f_6b97f5812768e81180f1005056a85b23" questionIndex="12">
    <table cellpadding="0" cellspacing="0">
        <tr style="font-family:Verdana; font-size:13px; color:#000000;">
            <td class="alignTop"><input
                    id="multioption0_6b97f5812768e81180f1005056a85b23"
                    name="multioption0_6b97f5812768e81180f1005056a85b23"
                    type="radio"
                    value="1 - Not at all satisfied"
                    onclick="ShowOneRadio(this);" />
            </td>
            <td class="alignTop">1 - Not at all satisfied</td>
        </tr>
        <tr style="font-family:Verdana; font-size:13px; color:#000000;">
            <td class="alignTop"><input
                    id="multioption1_6b97f5812768e81180f1005056a85b23"
                    name="multioption1_6b97f5812768e81180f1005056a85b23"
                    type="radio"
                    value="2 - Somewhat satisfied" onclick="ShowOneRadio(this);"
                    />
            </td>
            <td class="alignTop">2 - Somewhat satisfied</td>
        </tr>
    </table>
</div>

Answer 1

Flex box - это круто, я бы посоветовал взглянуть на его API

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Если у вас есть доступ для изменения HTML, я быИспользуемая вами разметка очень многословна для того, чего вы пытаетесь достичь.

Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы

.QuestionContainer {
  width: 100%;
}

.QuestionContainer tbody {
  display: flex;
  flex-direction: row;
}

tr {
  padding: 10px;
}

tr:nth-of-type(odd) {
  background: #ccc;
}

<div class="QuestionContainer" id="cont_id_f_6b97f5812768e81180f1005056a85b23" questionIndex="12">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td class="alignTop">
      <input  type="radio" value="1 - Not at all satisfied" onclick="ShowOneRadio(this);" />
      </td>
      <td class="alignTop">1 - Not at all satisfied</td>
    </tr>
    <tr>
      <td class="alignTop"><input type="radio" value="2 - Somewhat satisfied" onclick="ShowOneRadio(this);" />
      </td>
      <td class="alignTop">2 - Somewhat satisfied</td>
    </tr>
    <tr>
      <td class="alignTop">
      <input type="radio" value="1 - Not at all satisfied" onclick="ShowOneRadio(this);" />
      </td>
      <td class="alignTop">3 - Not at all satisfied</td>
    </tr>
    <tr>
      <td class="alignTop">
      <input type="radio" value="2 - Somewhat satisfied" onclick="ShowOneRadio(this);" />
      </td>
      <td class="alignTop">4 - Somewhat satisfied</td>
    </tr>
  </table>
</div>

Answer 2

.QuestionContainer tr {
    float:left;
}

Возможно, вы также захотите добавить к нему поле, например: 10px или около того.