css display:table first column too wide

Question

I have a css table setup like this:

<div class='table'>
 <div>
  <span>name</span>
  <span>details</span>
 </div>
</div>

The css for the table is:

.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;
}

As it stands the two columns are split evenly between the space occupied by the width of the table. I'm trying to get the first column only to be as wide as is needed by the text occupying it's cells

The table is an unknown width, as are the columns/cells.

Answer 1

Just give it a any small width like 1px. Table cells always expands to the smallest possible size to fit its content.

Answer 2

Try -> table-layout: fixed

Answer 3

You could use the first-child selector to find the first div within the table and give it a seperate with.

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

Answer 4

I don't know that you can get it to be the size of the text if that differs by row but you can try setting a width ="auto" or a percentage width for the columns.

Answer 5

you should change your class name "table" to some other. "table" suggest that it is class of some table than div.

try following

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