CSS-дисплей: таблица первого столбца слишком широко

Question

У меня есть настройка таблицы 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;
}

Поскольку оно выделяется два столбца равномерно разделены между пространством, занятым шириной таблицы. Я пытаюсь получить первый столбец только так же шириной, как требуется текст, занимающий его клетки

Стол - неизвестная ширина, как и столбцы / клетки.

Answer 1

Просто дайте ему любую небольшую ширину, как 1px. Отказ В таблицевых элементах всегда расширяется до наименьшего возможных размеров, чтобы соответствовать его содержанию.

Answer 2

Попробуй -> table-layout: fixed

Answer 3

Вы можете использовать селектор первого ребенка, чтобы найти первый Div в таблице и дать ему отдельный.

.table div:first-child
{
    width:30%;
}

Answer 4

Я не знаю, что вы можете получить его размер текста, если это отличается по ряду, но вы можете попробовать настроить ширину = «Авто» или в процентной ширине для столбцов.

Answer 5

Вы должны изменить имя вашего класса «Таблица» для некоторых других. «Таблица» предполагает, что это класс какого-либо стола, чем Div.

Попробуйте следуя

<div class='table'>
 <div>
  <span style="width:30%">name</span>
  <span>details</span>
 </div>
</div>