使用CSS提供表格數據，其中太寬的單元格不會破壞事物

我有我想要在固定大小的列中顯示的數據行。例如：使用CSS提供表格數據，其中太寬的單元格不會破壞事物

Name  City  Number 
Adam  Anaheim 714 555 5555 
Bob  Barstow 760 555 5555 
...  ...  ...

但是，偶爾有一列的數據太大而不適合。如果發生這種情況，我希望它影響儘可能少的鄰近單元格，而不是整行，如果它不必。

這是我DO想：

Name  City  Number 
Adam  Anaheim 714 555 5555 
Bob  Barstow 760 555 5555 
Constantine Canyon 805 555 5555 # Notice how phone number is still aligned :)

這是我DO NOT想：

Name  City  Number 
Adam  Anaheim 714 555 5555 
Bob  Barstow 760 555 5555 
Constantine Canyon  805 555 5555 # Notice how phone number is also shifted :(

如何做到這一點的HTML/CSS（無JavaScript，請）？

這是jsbin與非工作的解決方案，在那裏你可以玩耍，看看你自己。

UPDATE這裏的接受的答案的摘要，當你有N列：

第一N-1列具有一個DIV風格=內的被包裝「顯示：直列塊」，其MIN-寬度是前N-1列的合併寬度。然後在該DIV中，第一個N-2列必須包裹在類似的div中，其最小寬度是前N-2列的組合寬度。繼續此一路下跌......

這不是很漂亮，但它的工作原理，並且是可控的爲小型N.

來源

2010-11-14 Dustin Boswell

您可以發佈您當前的HTML標記？ – 2010-11-14 11:27:23

我嘗試使用最小寬度的左浮動DIV，但沒有奏效。我簡單地嘗試了一個香草TABLE，但是這會導致所有的列增長以適應最大的數據。 – 2010-11-14 11:34:29

如果您想要對齊數據，那麼按定義列不會增長以適合最大數據？ – deceze 2010-11-14 11:41:06

好問題。我找不到一種方法來處理普通表（部分原因是因爲需要包裝器元素，部分原因是IE不能正常工作），所以下面的解決方案使用div。

試試這個：

<!DOCTYPE html> 
<title>Test Case</title> 
<style type="text/css"> 
    body { font-size:11px; font-family: "Courier New"; } 
    * { margin:0; padding:0; } 

    .col, .span { display:inline-block; } 
    .col1 { min-width:12ex; } 
    .span2 { min-width:30ex; } 
    .span3 { min-width:40ex; } 

    /* IE6 */ 
    * html .col { display:inline; padding-right:1ex; } 
    * html .span { display:inline; white-space:nowrap; } 
    * html .col1 { width:12ex; } 
    * html .span2 { width:30ex; } 
    * html .span3 { width:40ex; } 

    /* IE7 */ 
    *:first-child+html .col { display:inline; padding-right:1ex; } 
    *:first-child+html .span { display:inline; } 
</style> 
<div class="table"> 
    <div class="row"> 
    <div class="span2 span"> 
     <div class="col1 col">Name</div> 
     <div class="col">City</div> 
    </div> 
    <div class="col">Number</div> 
    </div> 
    <div class="row"> 
    <div class="span2 span"> 
     <div class="col1 col">Adam</div> 
     <div class="col">Anaheim</div> 
    </div> 
    <div class="col">714 555 5555</div> 
    </div> 
    <div class="row"> 
    <div class="span2 span"> 
     <div class="col1 col">Bob</div> 
     <div class="col">Barstow</div> 
    </div>  
    <div class="col">760 555 5555</div> 
    </div> 
    <div class="row"> 
    <div class="span3 span"> 
     <div class="span2 span"> 
     <div class="col1 col">Constantine</div> 
     <div class="col">Canyon</div> 
     </div>   
     <div class="col">805 555 5555</div> 
    </div>   
    <div class="col"># Notice how phone number is still aligned :)</div> 
    </div> 
</div>

應該清楚如何擴大利用包裝「span4」，「span5」這一理念，進一步柱等

來源

2010-11-14 19:02:51 Alohci

我建議你使用div的，TD內< td><div class="mydiv">your content</div></td>

然後你在css .mydiv {overflow:auto;}中給出，這將在需要時添加滾動而不會破壞您的表格。

編輯 - 我剛纔看到你使用divs而不是table。爲什麼這個？

在任何情況下，您都可以使用屬性display:table;display:table-row;和display:table-cell;來表示表格數據。

這裏的一個例子http://jsbin.com/evoka3/3

來源

2010-11-14 11:33:35 Sotiris

如果可能，我想避免滾動條。在我展示的例子中，（理論上）可以在沒有它們的情況下呈現數據。 – 2010-11-14 11:36:29

我不認爲這是不可能的，沒有JavaScript，甚至沒有滾動條。也許有人知道另一種選擇。你可以在jsbin.com上舉一個實例來「玩」它嗎？ – Sotiris 2010-11-14 11:40:51

好主意 - 我在問題的結尾添加了jsbin鏈接。 – 2010-11-14 12:39:26

使用CSS提供表格數據，其中太寬的單元格不會破壞事物

回答

相關問題