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顯示：表的第一列太寬

回答

相關問題