CODEWITHSUNDEEP
htmlcssinternet-explorerfirefox
Developer Desk
Developer Desk

Reputation: 2344

Why table cell height is not shown properly in Firefox and IE browser?

My tables cells height shows differently in Firefox and IE browser it does not recognize height

Here is fiddle : Fiddle

Here is css :

#gradient-style
{
    font-size: 12px;
    width: 95%;
    text-align: left;
    border-collapse: collapse;        
    border: 1px solid gray;
    border-top: none;
    margin: 2%;
    margin-top: 50px;  

}
#gradient-style thead td
{
    background: gray;              
    border: 1px solid rgba(0,0,0,0.2);
    color: white;
    height: 50px;
    padding: 4px;
    text-align: center;
}

#gradient-style td
{
    padding: 6px; 
    margin: 0;
    border: 1px solid rgba(0,0,0,0.2);
    color: black;
    background: #DCDCDC;        
    vertical-align: middle; 
    text-align: center;
    width: 200px;
    height: 50px; 
}

#gradient-style tbody td:hover 
{
    background: #C0C0C0;
}
.tbl-content{   
    width: 100%;
    height: 600px;
    overflow: auto;

}

Upvotes: 0

Views: 161

Answers (2)

steakpi
steakpi

Reputation: 953

Try removing the height here:

.tbl-content{   
    width: 100%;
    /*height:600px; */  
   overflow: auto;
 }

Upvotes: 1

173901
173901

Reputation: 709

because your table-content has a height of 600px and that is on the scope of the body. Some browsers like Chrome may notice this is in error and ignore it, but IE doesn't correct those kinds of things. 

.tbl-content{   
    width: 100%;
    height: 200px; /* change this as you see fit */
    overflow: auto;
}

Upvotes: 0

Related Questions