Флажок выровнять альтернативы таблицы

ProgramBox

Флажок выровнять альтернативы таблицы

Post author:admin
Запись опубликована:14 апреля, 2023
Post category:Вопросы по программированию

#css #bootstrap-4

Вопрос:

У меня есть 5 флажков и таблица с 6 строками (1 заголовок, 5 тело), таблица представляет варианты вопроса. Как я могу выровнять каждый флажок с первой строкой каждой строки?

 table,
thead,
td {
  border: 1px solid black;
  padding: 3px;
}

thead {
  font-weight: bold !important;
}

table {
  margin: 5px;
  margin-bottom: 1rem;
}

.form-check {
  margin-left: -20px;
}

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<p style="margin-left: 20px;">
<form id='f1'>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='A'></div>
  <br>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='B'></div>
  <br>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='C'></div>
  <br>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='D'></div>
  <br>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='E'></div>
</form>
<table>
  <thead>
    <tr>
      <td> </td>
      <td>Event 1</td>
      <td>Event 2</td>
      <td>Event 3</td>
      <td>Event 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a)</td>
      <td>29</td>
      <td>29</td>
      <td>30</td>
      <td>30</td>
    </tr>
    <tr>
      <td>b)</td>
      <td>29</td>
      <td>30</td>
      <td>30</td>
      <td>31</td>
    </tr>
    <tr>
      <td>c)</td>
      <td>30</td>
      <td>30</td>
      <td>31</td>
      <td>31</td>
    </tr>
    <tr>
      <td>d)</td>
      <td>30</td>
      <td>31</td>
      <td>31</td>
      <td>31</td>
    </tr>
    <tr>
      <td>e)</td>
      <td>31</td>
      <td>31</td>
      <td>31</td>
      <td>31</td>
    </tr>
  </tbody>
</table>
</p>

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

Ответ №1:

Отсутствовал flex.Вот так…

 .wrap_my_face {
  display: flex;
  flex-direction: row;
}
table,
thead,
td {
  border: 1px solid black;
}
thead {
  font-weight: bold !important;
}
table {
  margin: 5px;
  margin-bottom: 1rem;
}
form {
  margin-top: 2.2875rem;
}
.form-check {
  margin: -.4125rem 0;
}

 <div style="margin-left: 20px;">
  <div class="wrap_my_face">
    <form id='f1'>
      <div class='form-check'><input type='checkbox' class='form-check-input' name='A'></div><br>
      <div class='form-check'><input type='checkbox' class='form-check-input' name='B'></div><br>
      <div class='form-check'><input type='checkbox' class='form-check-input' name='C'></div><br>
      <div class='form-check'><input type='checkbox' class='form-check-input' name='D'></div><br>
      <div class='form-check'><input type='checkbox' class='form-check-input' name='E'></div>
    </form>
    <table>
      <thead>
        <tr>
          <td> </td>
          <td>Event 1</td>
          <td>Event 2</td>
          <td>Event 3</td>
          <td>Event 4</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>a)</td>
          <td>29</td>
          <td>29</td>
          <td>30</td>
          <td>30</td>
        </tr>
        <tr>
          <td>b)</td>
          <td>29</td>
          <td>30</td>
          <td>30</td>
          <td>31</td>
        </tr>
        <tr>
          <td>c)</td>
          <td>30</td>
          <td>30</td>
          <td>31</td>
          <td>31</td>
        </tr>
        <tr>
          <td>d)</td>
          <td>30</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
        </tr>
        <tr>
          <td>e)</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

1. Это не очень гибкое решение. Наличие флажков, полностью независимых от строки, с которой они связаны, не является хорошей практикой — между флажком и строкой нет никакой связи, поэтому они могут легко не выровняться из-за изменений стиля, размера шрифта, дополнительного текста и т.д.

Ответ №2:

Принятый ответ не соответствует, если у вас есть строка с большей высотой, она больше не будет работать так, как предполагалось.

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

Пример:

 p {
  font-family: Lato;
}

.wrap_my_face {
  display: flex;
  flex-direction: row;
}

table,
thead,
td {
  border: 0px solid black;
  border-collapse: collapse;
}

.no-border-cell {
  border: 0px;
}

td {
border: 1px solid black;
}

thead {
  font-weight: bold !important;
}

table {
  margin: 5px;
  margin-bottom: 1rem;
}

form {
  margin-top: 2rem;
  ;
}

.form-check {
  margin: -.325rem 0;
}

     <form id='f1'>
    <table>
      <thead>
        <tr>
          <td class="no-border-cell"></td>
          <td></td>
          <td>Event 1</td>
          <td>Event 2</td>
          <td>Event 3</td>
          <td>Event 4</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="border: 0"><input type='checkbox' class='form-check-input' name='A'></td>
          <td>a)</td>
          <td>29
            dwqdwqdqw dqw qwd d dqdqd<br>dwqdwqd qw
          </td>
          <td>29</td>
          <td>30</td>
          <td>30</td>
        </tr>
        <tr>
        <td style="border: 0"><input type='checkbox' class='form-check-input' name='B'></td>
          <td>b)</td>
          <td>29</td>
          <td>30</td>
          <td>30</td>
          <td>31</td>
        </tr>
        <tr>
        <td style="border: 0"><input type='checkbox' class='form-check-input' name='C'></td>
          <td>c)</td>
          <td>30</td>
          <td>30</td>
          <td>31</td>
          <td>31</td>
        </tr>
        <tr>
        <td style="border: 0"><input type='checkbox' class='form-check-input' name='D'></td>
          <td>d)</td>
          <td>30</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
        </tr>
        <tr>
        <td style="border: 0"><input type='checkbox' class='form-check-input' name='E'></td>
          <td>e)</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
        </tr>
      </tbody>
    </table>
    </form>

Ответ №3:

Поскольку checkbox является блочным элементом, он занимает 100% ширины экрана. Даже с отрицательным запасом он не сдвинется. Вы можете добавить более простое решение flexbox в CSS или изменить отображение на встроенный элемент и использовать значения с плавающей точкой.