CSS display:table первый слишком широкий столбец
У меня есть установка таблицы 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;
}
Как есть два столбца разделяются равномерно между местом, занятым шириной таблицы. Я пытаюсь заставить первый столбец только быть столь широким, как необходим текстовому занятию, это - ячейки
Таблица является неизвестной шириной, как столбцы/ячейки.
5 ответов
Просто задайте ему небольшую ширину, например 1px . Ячейки таблицы всегда увеличиваются до минимально возможного размера, чтобы соответствовать ее содержимому.
, вам следует изменить имя вашего класса "таблица" на другое. "table" предполагает, что это класс некоторой таблицы, чем div.
попробуйте следовать
<div class='table'>
<div>
<span style="width:30%">name</span>
<span>details</span>
</div>
</div>
I не знаю, можно ли получить размер текста, если он отличается по строкам, но вы можете попробовать установить width = "auto" или процентную ширину для столбцов.
Вы можете использовать селектор first-child, чтобы найти первый div в таблице и присвоить ему отдельный с.
.table div:first-child
{
width:30%;
}