CSS显示：表的第一列太宽

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

因为它的立场两列被分割均匀在桌子宽度占据的空间之间。我试图让第一列的宽度与文本占用的单元格所需的宽度相同

该表格与列/单元格一样是未知宽度。

来源

2010-04-27 Mestore

'边境collapse'和'边境spacing'只适用于表，表中的行。你应该将它们移动到'.table'规则。注意：您没有真正使用桌子的任何特殊原因？ – RoToRa 2010-04-27 10:03:55

不使用html表格，因为代码遍布整个网站并通过一些ajax生成。我只是保持简单，因为ajax和php与问题无关。 – Mestore 2010-04-27 10:10:08

但是，确实生成嵌套的div和跨度与使用trs和tds生成表没有什么不同？那么如何（并处理这些CSS表问题）比通过AJAX输出表更简单？ – Simon 2010-04-27 10:14:05

只要给它一个像1px这样的小宽度。表单元格始终会扩展到最小可能的大小以适应其内容。

来源

2010-04-27 10:01:31 RoToRa

这已经被尝试过了，它使得宽度只和最长的单词一样宽。如果单元格有3-5个字，浏览器将尽可能地包裹以尽可能缩小单元格。 – Mestore 2010-04-27 10:07:35

尝试添加whitespace =“nowrap” – 2010-04-27 10:09:43

然后，您还需要添加'white-space：nowrap'来停止包装。 – RoToRa 2010-04-27 10:10:35

-1

你应该改变你的班级名称“表”到其他人。 “表”表明它是一些表格而不是div的类。

尝试以下

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

来源

2010-04-27 10:04:33 Salil

你可以使用第一子选择查找表中的第一个div，并给它一个单独的。

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

来源

2010-04-27 10:04:44 Rob

我不知道，你可以得到它是文本的大小，如果由不同行，但你可以尝试设置一个宽度=“自动”或列的百分比宽度。

来源

2010-04-27 10:08:51

尝试 - >table-layout: fixed

来源

2010-07-20 09:37:19 Fortisimo

你的传说。这解决了我用细胞破碎容器时遇到的问题。 – 2013-03-21 07:51:05

拯救生命！谢谢！ – 2013-12-13 05:35:41

你把这个放在哪里？ – evolutionxbox 2015-11-25 12:20:57

CSS显示：表的第一列太宽

回答

相关问题