дисплей css: слишком широкий первый столбец таблицы

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

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

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

9
column-width css css-tables

5 ответов

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

10

попробовать -> table-layout: fixed

14

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

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

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

1

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

попробовать следующие 

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