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

Question

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

РЕДАКТИРОВАТЬ: Это также делается в Bootstrap 4.

Вот так это выглядело, когда я добавил цвет фона в радио кнопка.

<div class="row">
        <div class="col-25">
                <h1>ABC Corp</h1>
                <h4>Bill for the month of: June</h4>
                <h4>Payment due: 5/10/2020</h4>
                <hr />
                <table id="billing">
                 
                        <tr>
                            <th width="25%">Company</th>
                            <th width="25%">Plan</th>
                            <th width="25%">Packages</th>
                            <th width="25%">Price/pkg</th>
                            <th>Total</th>
                        </tr>
                        <tr>
                            <td>ACME</td>
                            <td>Premium</td>
                            <td>10,000</td>
                            <td>$0.039</td>
                            <td>
                                <div>
                                    <label><input type="radio" id='regular' name="optradio">390.00</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>NB Distribution</td>
                            <td>Professional</td>
                            <td>1,000</td>
                            <td>$0.049</td>
                            <td>
                                <div>
                                    <label><input type="radio" id='regular' name="optradio">49.00</label>
                                </div>
                            </td>
                        </tr>
              
                </table>
                <hr>
                <p>Balance due <span class="price" style="color:black"><b>$439.00</b></span></p>
               <hr >
        </div>
  </div>

Answer 1

Вы можете использовать display: flex на этикетке:

label {
  display: flex;
}

<div class="row">
  <div class="col-25">
    <h1>ABC Corp</h1>
    <h4>Bill for the month of: June</h4>
    <h4>Payment due: 5/10/2020</h4>
    <hr />
    <table id="billing">

      <tr>
        <th width="25%">Company</th>
        <th width="25%">Plan</th>
        <th width="25%">Packages</th>
        <th width="25%">Price/pkg</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>ACME</td>
        <td>Premium</td>
        <td>10,000</td>
        <td>$0.039</td>
        <td>
          <div>
            <label><input type="radio" id='regular' name="optradio">390.00</label>
          </div>
        </td>
      </tr>
      <tr>
        <td>NB Distribution</td>
        <td>Professional</td>
        <td>1,000</td>
        <td>$0.049</td>
        <td>
          <div>
            <label><input type="radio" id='regular' name="optradio">49.00</label>
          </div>
        </td>
      </tr>

    </table>
    <hr>
    <p>Balance due <span class="price" style="color:black"><b>$439.00</b></span></p>
    <hr>
  </div>
</div>

Answer 2

Прежде всего переключатели отображаются в браузере @ csb00, а также вы должны сделать разные идентификаторы для двух переключателей.

Answer 3

не заключайте ваш ввод в тег label, вместо этого разделяйте эти два, как показано ниже.

    <input type="radio" id='regular' name="optradio">
    <label for="regular">390.00</label>