流量表与tdnowrap&textoverflow?-Fluidtablewithtdnowrap&text-overflow?

54  

Edit: fixed this myself using CSS:

编辑:我自己用CSS修复这个:

table { table-layout:fixed; width:100%; }

23  

Rather than using table-layout: fixed; for your table, you can use this trick to get a DIV to always take up the full space of a TD with text-overflow: ellipsis; functionality:

而不是使用表格布局:固定;对于您的表，您可以使用这个技巧来获得一个DIV，它总是占用TD的整个空间，其中包含文本溢出:省略号;功能:

div { width: 0; min-width: 100%; }

The main trick is giving the width something other than auto/percent, and using a min-width of 100%;

主要的技巧是，除了自动/百分数之外，还要给宽度设置一个最小的100%宽度;

div { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.myTable { width: 100%; border-collapse: collapse; }
td { border: 1px solid #000; }

td.td1 { width: 100%; min-width: 50px; }
td.td2 { width: 100px; min-width: 100px; }
td.td3 { width: 150px; min-width: 150px; }

td.td4 { width: 50%; min-width: 50px; }
td.td5 { width: 50%; min-width: 50px; }
td.td6 { width: 150px; min-width: 150px; }

The table can be fluid sized or fixed width. Just give some min-widths for contents as needed.

桌子可以是液体大小或固定宽度。只要根据需要为内容提供一些最小的宽度。

    

        
Very very very long text Very very very long text Very very very long text Very very very long text
        
Content 2
        
Content 3 also so very lonnnnngggg
    



    

        
Very very very long text Very very very long text Very very very long text Very very very long text
        
Content 2 has very very very many texts in a very very very long way
        
Content 3
    

JSfiddle

JSfiddle

4  

My full example :

我的完整的示例:

    


    

        

            
CHAMPIONNAT
            
CHAMPIONNAT
            
CHAMPIONNAT
            
CHAMPIONNAT
            
CHAMPIONNAT
            
CHAMPIONNAT
        
    

0  

for me,

对我来说,

worked...

工作……