Я делаю 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'ы были одинакового размера и сами не менялись?