css 显示：表格第一列太宽
我有一个像这样的 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;
}
就目前而言，两列在表格宽度占用的空间之间均匀分割。我试图让第一列的宽度与占据其单元格的文本所需的宽度相同。
表格的宽度未知，列/单元格也是如此。
I have a css table setup like this:
<div class='table'>
<div>
<span>name</span>
<span>details</span>
</div>
</div>
The css for the table is:
.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;
}
As it stands the two columns are split evenly between the space occupied by the width of the table. I'm trying to get the first column only to be as wide as is needed by the text occupying it's cells
The table is an unknown width, as are the columns/cells.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
你应该将你的类名“table”更改为其他名称。 “table”表明它是一些table的类而不是div。
尝试关注
you should change your class name "table" to some other. "table" suggest that it is class of some table than div.
try following
尝试->
表格布局：固定Try ->
table-layout: fixed只需给它一个任意小的宽度，例如
1px。表格单元格始终会扩展到尽可能小的大小以适合其内容。Just give it a any small width like
1px. Table cells always expands to the smallest possible size to fit its content.您可以使用第一个子选择器来查找表中的第一个 div 并给它一个单独的 with。
You could use the first-child selector to find the first div within the table and give it a seperate with.
我不知道如果行不同，您可以将其设置为文本的大小，但您可以尝试设置宽度=“自动”或列的百分比宽度。
I don't know that you can get it to be the size of the text if that differs by row but you can try setting a width ="auto" or a percentage width for the columns.