0

Скрин checkbox'ов Скрин checkbox'ов

Я делаю chrome-расширение. Сейчас готовлю настройки в popup. В нём есть несколько таблиц. В них в первой строке имеются checkbox и nobr.

Почему-то, если таблиц 3 и более, checkbox'ы разного размера и чем больше таблиц, тем "разнее" размер. На рисунке это не сразу видно, но очень бесит. Не могу понять почему, ведь у них одинаковые стили, как строк, так и checkbox'ов. Я даже пробовал ставить, не 2 похожие (т. е. с одинаковыми стилями) таблицы, а 2 полностью идентичные. Всё-равно - checkbox'ы разные.

Вот стили таблиц, строк, checkbox'ов, nobr'ов и HTML:

table {
  border-spacing: 0px;
  width: 190px;
  border: 1px solid black;
  border-radius: 5px;
  margin: 3px;
}

.markerLine {
  /*это первая строка*/
  font-size: 13px;
  user-select: none;
  background-color: #F5F5F5;
  color: #3B5998;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
  height: 18px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
}

.markerLine nobr {
  position: relative;
  top: -2px;
}

.markerLine input {
  /*checkbox*/
  width: 20px;
  background-color: #F5F5F5;
  color: #3B5998;
  position: absolute;
  left: 5px;
}
<table about="Submer">
  <tr>
    <td class="markerLine" id="submerView">
      <nobr>Submer</nobr>
    </td>
  </tr>
</table>
<table about="ProblemViewer">
  <tr>
    <td class="markerLine" style="cursor: default" id="problemViewerView">
      <input type="checkbox" id="problemViewer" checked/>
      <nobr style="top: -1.5px">ProblemViewer</nobr>
    </td>
  </tr>
</table>
<table about="Ranker">
  <tr>
    <td class="markerLine" id="rankerView">
      <input type="checkbox" id="ranker" checked/>
      <nobr>Ranker</nobr>
    </td>
  </tr>
</table>

Подскажите, пожалуйста, люди добрые, что не так? Как сделать так, чтобы все checkbox'ы были одинакового размера и сами не менялись?

1
  • Зачем верстать таблицу со стилями flexbox ?
    – evgen_dev
    Commented 9 мар. в 15:40

1 ответ 1

0

Спасибо за ответ, но я уже успел исправить сам:

  1. px это не пиксель: я измерял checkbox'ы в paint и они были 15х15 (монитор у меня стандартный 1920х1080). А оказалось, что их высота в px должна быть 12.
  2. Я поставил их слева при помощи float: left; А сдвиг сделал через width: 20px; (мне надо, чтобы кликабельная зона была шире самого checkbox'а).
1
  • paint - это конечно сильно =)
    – evgen_dev
    Commented 13 мар. в 23:03

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.