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.表格单元格总是扩展到可能的最小尺寸以适合其内容.