css显示：表格第一列太宽答案

【问题标题】：css display:table first column too widecss显示：表格第一列太宽
【发布时间】：2011-02-12 19:04:34
【问题描述】：

我有一个这样的 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;
}

就目前而言，两列在表格宽度所占据的空间之间平均分配。我试图让第一列的宽度与占据它的单元格的文本一样宽

表格的宽度未知，列/单元格也是如此。

【问题讨论】：

border-collapse 和 border-spacing 仅适用于表到表行。您应该将它们移至.table 规则。注意：有什么特殊原因您实际上没有使用桌子吗？
不使用 html 表，因为代码存在于整个站点并且是通过一些 ajax 生成的。我只是保持简单，因为 ajax 和 php 与问题无关。
但是生成嵌套的 div 和 span 肯定与生成带有 trs 和 tds 的表没有什么不同？这（以及处理这些 CSS 表格问题）比仅通过 AJAX 输出表格更容易吗？
这主要是出于“主题”的原因，我正在开发的网站有用户可自定义的主题。表 trs 和 tds 需要更新相当广泛的主题代码。另外（虽然我可能弄错了，css 还不是我非常擅长的东西）它可能会弄乱嵌套 div 和 span 的继承。在这一点上，这样做似乎更容易。

标签： css column-width css-tables

【解决方案1】：

只要给它一个小的宽度，比如1px。表格单元格总是扩展为尽可能小的尺寸以适应其内容。

【讨论】：

这个已经试过了，它使宽度只和最长的单词一样宽。如果单元格有 3-5 个单词，浏览器将尽可能换行以使单元格尽可能窄。
尝试添加空格="nowrap"
那你还需要加上white-space: nowrap来停止换行。
不知道空格：nowrap;这解决了问题。谢谢
我的桌子中间只有一列也遇到了同样的问题，但感谢这里的建议，问题解决了。

【解决方案2】：

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

尝试关注

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

试试 -> table-layout: fixed

【讨论】：

你的传奇。这解决了我遇到的细胞脱离容器的问题。
你把这个放在哪里？
这在 .table 中，它使所有表格列与其他列的宽度一致。