使用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提供表格数据，其中太宽的单元格不会破坏事物

回答

相关问题