Как сделать так, чтобы радиокнопка внутри таблицы выглядела как кнопка, используя bootstrap?

Question

Я не могу решить проблему - пока - около bootstrap, но я надеюсь, что кто-нибудь может дать мне несколько советов по ее решению :)

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

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

Вот что у меня есть

Что есть

Вот что я хочу что хочу

Я попытался разместить div, содержащий ряд кнопок для применения class="btn-group btn-group-toggle" data-toggle="buttons", но у меня не получается заставить его работать. Если я напишу этот код в теге <tr>, он будет работать, но строка выше сместится в правую часть экрана.

Кроме того, я попытался использовать css, чтобы скрыть круг

input[type=radio]{
    visibility: hidden;
}

но текст внутри кнопки не по центру

Большое спасибо за ваше время и за помощь!

Вот мой код:

<table class="table table-responsive">
  <thead class="thead-light">
    <tr>
      <th scope="col">Zona Sísmica</th>
      <th scope="col">I</th>
      <th scope="col">II</th>
      <th scope="col">III</th>
      <th scope="col">IV</th>
      <th scope="col">V</th>
      <th scope="col">VI</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Valor factor Z</th>
      <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <td>
          <label class="btn btn-outline-primary">
             <input type="radio" name="z" id="Zop1" value="0.15"> 0.15                        
          </label>
        </td>
        <td>
          <label class="btn btn-outline-primary">
            <input type="radio" name="z" id="Zop2" value="0.25"> 0.25
          </label>
        </td>
        <td>
          <label class="btn btn-outline-primary">
            <input type="radio" name="z" id="Zop3" value="0.30"> 0.30
          </label>
        </td>
        <td>
          <label class="btn btn-outline-primary">
            <input type="radio" name="z" id="Zop4" value="0.35"> 0.35
          </label>
        </td>
        <td>
          <label class="btn btn-outline-primary">
            <input type="radio" name="z" id="Zop5" value="0.40"> 0.40
          </label>
        </td>
        <td>
          <label class="btn btn-outline-primary">
            <input type="radio" name="z" id="Zop6" value="0.50"> &ge;0.50
          </label>
        </td>
      </div>
    </tr>
  </tbody>
</table>

Answer 1

Вот решение, основанное на этом руководстве .

Вы определенно можете улучшить его, используя некоторые другие предложения, которые они предлагают (например, стили для :hover и :focus) - что я рекомендую сделать из соображений эстетики c и доступности.

Переключатели скрыты с opacity: 0 и width: 0, а ярлыки закрывают их из-за position: fixed (для которого требуется предок с position, установленным в значение, отличное от static)

Поскольку метка сразу следует за элементом ввода в разметке, ее можно динамически стилизовать, когда скрытый ввод проверяется / снимается с помощью .better-radio:checked + label.

.better-radio {
  opacity: 0;
  position: fixed;
  width: 0;
}
label {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid black;
  border-radius: 4px;
  background-color: lightgrey;
}
.better-radio:checked + label {
  background-color: lightgreen;
  border-color: green;
}

<table class="table table-responsive">
  <thead class="thead-light">
    <tr>
      <th scope="col">Zona Sísmica</th>
      <th scope="col">I</th>
      <th scope="col">II</th>
      <th scope="col">III</th>
      <th scope="col">IV</th>
      <th scope="col">V</th>
      <th scope="col">VI</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Valor factor Z</th>
      <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <td>
          <input class="better-radio" type="radio" name="z" id="zop1" value="0.15" />
          <label for="zop1" class="btn btn-outline-primary">0.15</label>
        </td>
         <td>
          <input class="better-radio" type="radio" name="z" id="zop2" value="0.25" />
          <label for="zop2" class="btn btn-outline-primary">0.25</label>
        </td>
         <td>
          <input class="better-radio" type="radio" name="z" id="zop3" value="0.30" />
          <label for="zop3" class="btn btn-outline-primary">0.30</label>
        </td>
         <td>
          <input class="better-radio" type="radio" name="z" id="zop4" value="0.35" />
          <label for="zop4" class="btn btn-outline-primary">0.35</label>
        </td>
         <td>
          <input class="better-radio" type="radio" name="z" id="zop5" value="0.40" />
          <label for="zop5" class="btn btn-outline-primary">0.40</label>
        </td>
         <td>
          <input class="better-radio" type="radio" name="z" id="zop6" value="0.50" />
          <label for="zop6" class="btn btn-outline-primary">&ge;0.50</label>
        </td>
      </div>
    </tr>
  </tbody>
</table>

Answer 2

Посмотрите этот пример, он работает.

div label input {
   margin-right:100px;
}
body {
    font-family:sans-serif;
}

#ck-button {
    margin:4px;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#ck-button:hover {
    border:1px solid red;
}

#ck-button label {
    float:left;
    width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:checked + span {
  border: 1px solid blue;
}

<div id="ck-button">
  <label>
     <input type="radio" value="1"><span>red</span>
  </label>
</div>