Responsive table by columns

Question

I have a table with four columns and I need to have a responsive table where each column will be below the other but I don\'t know how to do it. I hope that there is some an

Answer 1

Table have a problem with responsivity, because table datas are written by lines, so data in code looks thus: A, B, C, D, A, B, C, D... not A, A, A, A, B, B, B, B...

So you not get output with datas in the right order.

If you use media query, output looks thus:

@media all and (max-width:500px){
    table{
        width:100%;
    }

    td{
        display:block;
        width:100%;
    }

    tr{
        display:block;
        margin-bottom:30px;
    }
}

http://jsfiddle.net/sjdjrm8m/

---

You need convert your table to this enrollment:

HTML:

            

            
Some title
        
    

        



    


        

            
 Title

            
        
        

            

                
40.000  eur

                    
month
            
        
        

            
 Text

                

                
Lorem Ipsum

                
                
Lorem Ipsum

                
                
Lorem Ipsum

                
            
        
        

            

                
            
        


    
 
    


    

        
 Title2

            
    
    

            

                
40.000  eur

                    
month
            
        
        

            
 Text

                

                
Lorem Ipsum

                
                
Lorem Ipsum

                
                
Lorem Ipsum

                
            
        
        

            

                
            
        


    



CSS:

@media all and (max-width:500px){
    table{
        width:100%;
    }

    td{
        display:block;
        width:100%;
    }

    tr{
        display:block;
        margin-bottom:30px;
    }

    tr tr{
        margin-bottom:0;
    }
}


http://jsfiddle.net/9yefftan/
    

             

                                                        
            
            

              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              

                          
             
       
          
              
                                       

     查看其它5个回答


            
                         

                    



               
            

    发布评论:
    

         
                        
    
    
提交评论 
  
  

                    
                    

                    

                        

                        
                         加载中...
                        
                    
                
          
                              			
        
        
        

          

            
            

              
              

            
    


                                 
              
            
                          
    

        
         

                验证码
                

                  
                
                

                   看不清?
                
              
                                  

                    
   
                 
             
              
提交回复
            
          
        
      
       
      
    
    

          
 
     
 

        
热议问题