NickD NickD - 4 months ago 8
HTML Question

What i am doing wrong in table with divs

What i am doing wrong with this table constructed with divs?
Why header row and cell row don't have the same width?

Another problem is, when resizing browser window header an cell losing their justify. I'd like to have the same movement for both header and cells.
if you resize your browser window you will see borders moving different.

here is my code



html, body {
width: 100%;
height: 95vh;
overflow: hidden;
background-color: rgba(31, 30, 30, 1);
}
.records {
width: 99%;
overflow-x: hidden;
overflow-y: auto;
}
.header-cell {
display: inline-block;
width: 9%;
height: 20px;
margin-top: 2px;
margin-left: -4px;
border: 1px solid #fff;
background: #3a3a3a;
color: #fff;
white-space: nowrap;
}
.cell {
display: inline-block;
width: 9%;
height: 20px;
margin-top: 2px;
margin-left: -4px;
border: 1px solid #fff;
background: #ccc;
color: #494949;
white-space: nowrap;
}
.header {
position: fixed;
width: 100%;
}
.row1 {
padding-top: 4px;
}

/* scrollbars */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
border-radius: 10px;
background: rgba(204, 51, 0, .9);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 0, 0, .4);
}
/* scrollbars */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
border-radius: 10px;
background: rgba(204, 51, 0, .9);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 0, 0, .4);
}

<div class="records">
<div class="header">
<div class="header-cell">#</div>
<div class="header-cell">Movie</div>
<div class="header-cell">Distributor</div>
<div class="header-cell">Country</div>
<div class="header-cell">Language</div>
<div class="header-cell">Name</div>
<div class="header-cell">Role</div>
<div class="header-cell">Born</div>
<div class="header-cell">Star Sign</div>
<div class="header-cell">Episodes</div>
</div>
<div style="padding-top:19px;">
<div class="cell">145</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">
<a href="http://www.imdb.com/name/nm0227759/?ref_=tt_cl_t1">Peter Dinklage</a>
</div>
<div class="cell">Tyrion Lannister</div>
<div class="cell">June 11, 1969</div>
<div class="cell">Gemini</div>
<div class="cell">2-3-4-6-11</div>
</div>
<div style="padding-top:1px;">
<div class="cell">146</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">
<a href="http://www.imdb.com/name/nm3229685/?ref_=tt_cl_t4">Kit Harington</a>
</div>
<div class="cell">Jon Snow</div>
<div class="cell">December 26, 1986</div>
<div class="cell">Capricorn</div>
<div class="cell">1-2-3-6-9</div>
</div>
</div>




Answer

I have updated your html and styles, The width of the entries row and the float: left; used instead of display: inline-block;

HTML

<div class="records" >
    <div class="header">
        <div class="header-cell">#</div>
        <div class="header-cell">Movie</div>
        <div class="header-cell">Distributor</div>
        <div class="header-cell">Country</div>
        <div class="header-cell">Language</div>
        <div class="header-cell">Name</div>       
        <div class="header-cell">Role</div>  
        <div class="header-cell">Born</div>      
        <div class="header-cell">Star Sign</div>
        <div class="header-cell">Episodes</div> 
    </div>
    <div style="padding-top:19px;width:100%">
        <div class="cell">145</div>
        <div class="cell">Game Of Thrones</div>
        <div class="cell">HBO</div>
        <div class="cell">USA</div>    
        <div class="cell">English</div>
        <div class="cell"><a href="http://www.imdb.com/name/nm0227759/?ref_=tt_cl_t1">Peter Dinklage</a></div>
        <div class="cell">Tyrion Lannister</div>
        <div class="cell">June 11, 1969</div>       
        <div class="cell">Gemini</div>  
        <div class="cell">2-3-4-6-11</div>  
    </div>  
    <div style="padding-top:1px;width:100%">
        <div class="cell">146</div>
        <div class="cell">Game Of Thrones</div>
        <div class="cell">HBO</div>
        <div class="cell">USA</div>    
        <div class="cell">English</div>
        <div class="cell"><a href="http://www.imdb.com/name/nm3229685/?ref_=tt_cl_t4">Kit Harington</a></div>
        <div class="cell">Jon Snow</div>
        <div class="cell">December 26, 1986</div>       
        <div class="cell">Capricorn</div>  
        <div class="cell">1-2-3-6-9</div>  
    </div>
</div>

Style

html,body {
    width:100%;
    height:95vh;
    background-color: rgba(31,30,30,1);
    overflow:hidden;
}
.records {
    width:99%;
    overflow-x:hidden;
    overflow-y:auto;
}
.header-cell {
    height: 20px;
    width: 9%;
    background: #3a3a3a;
    color: #ffffff;
    /* display: inline-block; */
    /* margin-left: -4px; */
    white-space: nowrap;
    border: 1px solid #fff;
    /* margin-top: 2px; */
    float: left;
}
.cell {    
    height: 20px;
    width: 9%;
    background: #cccccc;
    color: #494949;
    /* display: inline-block; */
    /* margin-left: -4px; */
    float: left;
    white-space: nowrap;
    border: 1px solid #fff;
    /* margin-top: 2px; */
}
.header {
    /*position:fixed; */
    width:100%;
}
.row1 {
    padding-top:4px;
}

/* scrollbars */
::-webkit-scrollbar {width: 5px;}   
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}    
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
/* scrollbars */
::-webkit-scrollbar {width: 5px;}   
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}    
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }

Refer the update fiddle : https://jsfiddle.net/5Ldv5m1a/3/