Break a 5-column table into two parts for mobile devices

Question

I have a 5-column table that is displayed correctly in a desktop browser.

In a mobile browser, it makes the page too wide, and adds a horizontal scrollbar which I don't want.

Is there a media query CSS rule that could help to split this table into 3 columns / 2 columns stacked vertically instead of 5 columns?

Exemple: on mobile devices, insead of:

A  B  C  D  E
aa bb cc dd ee
ff gg hh ii jj

it should be

A  B  C  
aa bb cc 
ff gg hh 

D  E
dd ee
ii jj




A
B
C
D
E

aa bb cc dd ee
ff gg hh ii jj
ff gg hh ii jj

user_9770716 · Answer

Usually when I need to do something like this, or I use a horizontal scroll or I destruct the Table like this example that you can control the size of blocks using flexbox or something that you prefer:

@media only screen and (max-width: 800px) {
    
    /* Force table to not be like tables anymore */
    #no-more-tables table, 
    #no-more-tables thead, 
    #no-more-tables tbody, 
    #no-more-tables th, 
    #no-more-tables td, 
    #no-more-tables tr { 
        display: block; 
    }
 
    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-tables thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
 
    #no-more-tables tr { border: 1px solid #ccc; }
 
    #no-more-tables td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        white-space: normal;
        text-align:left;
    }
 
    #no-more-tables td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }
 
    /*
    Label the data
    */
    #no-more-tables td:before { content: attr(data-title); }
}


          No More Tables
         
          
              
                  
                      Code
                      Company
                      Price
                      Change
                      Change %
                      Open
                      High
                      Low
                      Volume
                  
              
                
                    
                        AAC
                        AUSTRALIAN AGRICULTURAL COMPANY LIMITED.
                        $1.38
                        -0.01
                        -0.36%
                        $1.39
                        $1.39
                        $1.38
                        9,395
                    
                    
                        AAD
                        ARDENT LEISURE GROUP
                        $1.15
                          +0.02
                        1.32%
                        $1.14
                        $1.15
                        $1.13
                        56,431
                    
                    
                        AAX
                        AUSENCO LIMITED
                        $4.00
                        -0.04
                        -0.99%
                        $4.01
                        $4.05
                        $4.00
                        90,641
                    
                    
                        ABC
                        ADELAIDE BRIGHTON LIMITED
                        $3.00
                          +0.06
                        2.04%
                        $2.98
                        $3.00
                        $2.96
                        862,518
                    
                    
                        ABP
                        ABACUS PROPERTY GROUP
                        $1.91
                        0.00
                        0.00%
                        $1.92
                        $1.93
                        $1.90
                        595,701
                    
                    
                        ABY
                        ADITYA BIRLA MINERALS LIMITED
                        $0.77
                          +0.02
                        2.00%
                        $0.76
                        $0.77
                        $0.76
                        54,567
                    
                    
                        ACR
                        ACRUX LIMITED
                        $3.71
                          +0.01
                        0.14%
                        $3.70
                        $3.72
                        $3.68
                        191,373
                    
                    
                        ADU
                        ADAMUS RESOURCES LIMITED
                        $0.72
                        0.00
                        0.00%
                        $0.73
                        $0.74
                        $0.72
                        8,602,291
                    
                    
                        AGG
                        ANGLOGOLD ASHANTI LIMITED
                        $7.81
                        -0.22
                        -2.74%
                        $7.82
                        $7.82
                        $7.81
                        148
                    
                    
                        AGK
                        AGL ENERGY LIMITED
                        $13.82
                          +0.02
                        0.14%
                        $13.83
                        $13.83
                        $13.67
                        846,403
                    
                    
                        AGO
                        ATLAS IRON LIMITED
                        $3.17
                        -0.02
                        -0.47%
                        $3.11
                        $3.22
                        $3.10
                        5,416,303

You can see some options to solve responsive tables on this link: https://elvery.net/demo/responsive-tables/

I hope it's can help you!

user_1646240 · Answer

It is possible to use word-break property to avoid beery long sentences

.your-class {
  width: 80px;  
  word-break: break-word;
}

An example:

.your-class {
  width: 80px;
  word-break: break-word;
}

It is a very long string

Break a 5-column table into two parts for mobile devices

2 Answers