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

只要给它一个小宽度 1px. 。表单元总是扩展到最小的尺寸以适合其内容。

Answer 2

尝试 - > table-layout: fixed

Answer 3

您可以使用第一子女选择器在表中找到第一个div，并将其分开。

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

Answer 4

我不知道如果行之不同，您可以将其变为文本的大小，但是您可以尝试设置宽度=“自动”或列的百分比宽度。

Answer 5

您应该将课堂名称“表”更改为其他。 “表”表明它是某个表的类，而不是Div。

尝试关注

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