CSS-дисплей: таблица первого столбца слишком широко
-
01-10-2019 - |
Вопрос
У меня есть настройка таблицы CSS, как это:
<div class='table'>
<div>
<span>name</span>
<span>details</span>
</div>
</div>
CSS для таблицы:
.table{
display:table;
width:100%;
}
.table div{
text-align:right;
display:table-row;
border-collapse: separate;
border-spacing: 0px;
}
.table div span:first-child {
text-align:right;
}
.table div span {
vertical-align:top;
text-align:left;
display:table-cell;
padding:2px 10px;
}
Поскольку оно выделяется два столбца равномерно разделены между пространством, занятым шириной таблицы. Я пытаюсь получить первый столбец только так же шириной, как требуется текст, занимающий его клетки
Стол - неизвестная ширина, как и столбцы / клетки.
Решение
Просто дайте ему любую небольшую ширину, как 1px
. Отказ В таблицевых элементах всегда расширяется до наименьшего возможных размеров, чтобы соответствовать его содержанию.
Другие советы
Попробуй -> table-layout: fixed
Вы можете использовать селектор первого ребенка, чтобы найти первый Div в таблице и дать ему отдельный.
.table div:first-child
{
width:30%;
}
Я не знаю, что вы можете получить его размер текста, если это отличается по ряду, но вы можете попробовать настроить ширину = «Авто» или в процентной ширине для столбцов.
Вы должны изменить имя вашего класса «Таблица» для некоторых других. «Таблица» предполагает, что это класс какого-либо стола, чем Div.
Попробуйте следуя
<div class='table'>
<div>
<span style="width:30%">name</span>
<span>details</span>
</div>
</div>