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

Answer 3

您可以使用第一个子选择器来查找表中的第一个div，并将其单独分配。

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

Answer 4

我不知道你可以把它作为文本的大小，如果它按行不同，但你可以尝试设置宽度=“自动”或列的百分比宽度。

Answer 5

你应该把你的班级名称“表”更改为其他名称。 “table”表明它是某个表的类而不是div。

尝试下面

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