css - 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

您可以使用 first-child 选择器在表格中找到第一个 div 并给它一个单独的 with。

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

Answer 4

我不知道如果文本的大小因行而异，你可以让它成为文本的大小，但你可以尝试为列设置宽度 =“auto”或百分比宽度。

Answer 5

您应该将您的班级名称“table”更改为其他名称。"table" 表明它是某些表而不是 div 的类。

尝试关注

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