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

尝试 - ＆gt; table-layout: fixed

Answer 2

只需给它一个像1px这样的小宽度。表格单元格总是扩展到可能的最小尺寸以适合其内容。

Answer 3

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

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

Answer 4

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

Answer 5

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

尝试以下

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

css显示：表格第一列太宽

5 个答案: