Responsive Div Table

Question

I tried generating a div table from this website: http://divtable.com/generator/

However, everything is working fine except for the responsiveness of the Div Table. When minimizing the browser width, I'd like it to be fully responsive. For example, I would only want it to show two items per row on mobile devices.

Here's the code I'm using for it:

.divTable{
    display: table;
    width: 100%;
 text-align: center;

}
.divTableRow {
    display: table-row;
}
.divTableHeading {
    background-color: #ffffff;
    display: table-header-group;
}
.divTableCell, .divTableHead {
    border: 1px solid #ffffff;
    display: table-cell;
    padding: 3px 10px;
}
.divTableHeading {
    background-color: #ffffff;
    display: table-header-group;
    font-weight: bold;
}
.divTableFoot {
    background-color: #ffffff;
    display: table-footer-group;
    font-weight: bold;
}
.divTableBody {
    display: table-row-group;
}




 
iPhone 4 Parts
 
iPhone 4s Parts
 
iPhone 5 Parts
 
iPhone 5c Parts


 
iPhone 5s Parts
 
iPhone SE Parts
 
iPhone 6 Parts
 
iPhone 6 Plus Parts


 
iPhone 6s Parts
 
iPhone 6s Plus Parts
 
iPhone 7 Parts
 
iPhone 7 Plus Parts

fabOnReact · Accepted Answer

I suggest you to use bootstrap, I redesigned your code using bootstrap CSS style. I used for the large desktop the col-md-3 class. This class gives each one of the div including your images a width of 25% when the screen is larger then 992px, consequently each "row" div will have 4 column at this set width. When the screen is smaller then 992px, but larger then 750px I applied col-sm-6 that let the screen just have 2 Images for row. The width of col-md-6 in the bootstrap.css file is set at 50%. The maximum number of columns in bootstrap are 12, col-sm-6 means 6 columns span. For the small devices I just used a media query for maximum size of 320 px, the smartphone will only display 1 item for row. The media query let you set custom css rules for a specific windows width. You can check the below code and learn to use bootstrap on many websites or at the following link:

http://getbootstrap.com/

When you use bootsrap, you will need to include in your head file, before your main.css file the link to the bootstrap CDN or your local bootstrap file. You should include this bootstrap file, before your stylesheet, so that you can overwrite this rules with your custom rules.



    
        
        
    

    

    
       
iPhone 4 Parts
      
       
iPhone 4s Parts
      
       
iPhone 5 Parts
      
       
iPhone 5c Parts

This is the css

.divTableCell, .divTableHead {
    border: 1px solid #ffffff;
    /*display: table-cell;
    padding: 3px 10px;*/
    text-align: center;
}

@media (max-width: 320px) { 
    .divTableCell {
        width: 100%;
    }
}

Responsive Div Table

Answers (2)

Related Questions