Отображение 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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

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

попробуйте следующий

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