CSS / HTML Изменения ширины таблицы при наведении - PullRequest
Новая
       21

CSS / HTML Изменения ширины таблицы при наведении

0 голосов
/ 22 марта 2020

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

CSS: 

:root{
    --table-color: #7570D4;
}
.blister-table{
    border-collapse: collapse;
    margin: 25px 0px;
    font-size: 0.9em;
    min-width: 400px;
}
.blister-table thead tr{
    background-color: var(--table-color);
    color: white;
    text-align: left;
    font-weight: bold;
}
.blister-table tbody tr{
    border-bottom: 1px solid #ccc;
}
.blister-table tbody tr:hover{
    font-weight: bold;
    color: var(--table-color);
    background-color: #ddd;
}
...