发表新帖
发表新帖

Fluid table with td nowrap & text-overflow?

后端 未结
关注
4 477
时光取名叫无心
时光取名叫无心 2021-01-31 10:04

Here is my problem HTML:


  

    
      


        

                      

              相关标签:
       

      
      
      

        

          4条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  终归单人心        
                
              
    
                            
    
                2021-01-31 10:26
              
    
            
    
            
    
                                                                       

    for me, 
    


    <style type='text/css'>
table {
 white-space: normal;
}
</style>

    


    worked...
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  旧巷少年郎        
                
              
    
                            
    
                2021-01-31 10:29
              
    
            
    
            
    
                                                                       

    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 { width: 0; min-width: 100%; }

    


    The main trick is giving the width something other than auto/percent, and using a min-width of 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.
    


    <table class="myTable">
    <tr>
        <td class="td1"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td>
        <td class="td2"><div>Content 2</div></td>
        <td class="td3"><div>Content 3 also so very lonnnnngggg</div></td>
    </tr>
</table>

<table class="myTable">
    <tr>
        <td class="td4"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td>
        <td class="td5"><div>Content 2 has very very very many texts in a very very very long way</div></td>
        <td class="td6"><div>Content 3</div></td>
    </tr>
</table>

    


    JSfiddle
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  隐瞒了意图╮        
                
              
    
                            
    
                2021-01-31 10:32
              
    
            
    
            
    
                                                                       

    Edit: fixed this myself using CSS:
    


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

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  醉酒成梦        
                
              
    
                            
    
                2021-01-31 10:49
              
    
            
    
            
    
                                                                       

    My full example :
    


    <head>
    <style>
        table {
            width:100%;
            table-layout:fixed;
        }
        td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
        </tr>
    </table>
</body>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
                             

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          

        

      

       
      
    
    

          
 
     
 

        
热议问题