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.