css display:table first column too wide

问题

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.

回答1:

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

回答2:

Try -> table-layout: fixed

回答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%;
}

回答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.

回答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>

来源：https://stackoverflow.com/questions/2720209/css-displaytable-first-column-too-wide