Avoid body scroll width on DIV table header

Question

I have a DIV table, with a DIV as a header and other DIV called "tableContent", containing several DIVS as content. Each first DIv of each row (incl. header) is 60%, second one 20%, and the other two are 10%. --- JSFIDDLE DEMO

The problem comes whith the property overflow-y:scroll on tableContent, that is needed as tableContent has a fixed height and all overflowing content must be seen by scrolling. You can see here how table imbalances due to this: header and conten columns are not at the same width:

imbalance

This is due to the fact that now 100% of tableContent includes the 16px of the scroll

How can I make header divs and content divs ave the same final width?

HTML code:



            
                Turno
            
            
                Tipo
            
            
                Editar
            
            
                Estado
            




    
    Fín de semana 1 (09:00 - 13:00)


    Mañana


    


    
    


    
    
    Fín de semana 1 (09:00 - 13:00)


    Mañana


    


    
    


    
    
    Fín de semana 1 (09:00 - 13:00)


    Mañana


    


    
    


    
    
    Fín de semana 1 (09:00 - 13:00)


    Mañana


    


    
    


    
    
    Fín de semana 1 (09:00 - 13:00)


    Mañana


    


    
    


    
    
    Fín de semana 1 (09:00 - 13:00)


    Mañana

CSS code:

.tableWrap{
    width: 100%;
    height:auto;
    border:#ccc 1px solid;
    border-radius:3px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0 1px 2px #d1d1d1;
    margin: 10px 10px 0 10px;
    background: #fbfbfb;
    color:#666;
    font-size: 11px;}


.tableHeader{
    height: 40px;
    width: 100%;
    line-height: 40px;
    background: -moz-linear-gradient(center top , #EDEDED, #EBEBEB) repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: inline-block;
    font-weight: 600;
    border-bottom: 1px solid #E0E0E0;


}
.tableContent{
    width:100%;
    height: 150px;
    overflow-y:scroll;
}
.tableHeaderText{
     line-height: 40px;
     padding: 0 10px;
     text-align: center;

}

.tableRow{
    height: 36px;
    width: 100%;
    background: #fbfbfb;
}

.tableContentText{
    line-height: 36px;
    padding: 0 0 0 20px;
}

.contentColumn60{
    height: 36px;
    width: 60%;
    border-bottom:1px solid #e0e0e0;
    float: left;
}

.contentColumn20{
    height: 36px;
    width: 20%;
    border-bottom:1px solid #e0e0e0;
    border-left:1px solid #e0e0e0;
    float: left;
}

.contentColumn10{
    height: 36px;
    width: 9.5%;
    border-bottom:1px solid #e0e0e0;
    border-left:1px solid #e0e0e0;
    float: left;
    text-align: center;
}

.tableHeaderColumn{
    border-top:1px solid #fafafa;
    border-bottom: none;
}

.tableIconLink{
    text-align: center;
}

.tableContent .tableRow:hover{
    background-color: #f2f2f2;
}




.discontinueIcon{
    width: 21px;
    height: 21px;
    background-size: cover;
    background-image: url(images/error.png);
    opacity: 0.5;
    background-repeat:no-repeat;
    margin: 8px auto;
    display: block;
}

.editIcon{
    width: 21px;
    height: 21px;
    background-size: cover;
    background-image: url(images/edit.png);
    opacity: 0.5;
    background-repeat:no-repeat;
    margin: 8px auto;
    display: block;
}

wf4 · Accepted Answer

You could use CSS3 calc to account for the size of the scrollbar

.tableHeader {
    width: -moz-calc(100% - 17px);
    width: -webkit-calc(100% - 17px);
    width: -o-calc(100% - 17px);
    width: calc(100% - 17px);
}

There are also other ways which you can do this by adding a padding to the right side of the header wrapper.

for that, you would need to add this:

.tableHeader {
    padding-right:17px;
   -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;     /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Avoid body scroll width on DIV table header

Answers (1)

Related Questions