Resizable HTML Table using Divs on IE9 with some cells as images and othes extensible
Question
I have a question regarding HTML tables. I created HTML table using Divs. Some cells contain images so they have fixed size. The bottom cell is resizable according to data filled in other box. So, I don't want to use absolute option in this solute. Here's my code:
<!DOCTYPE html>
<html>
<header>
<style type="text/css">
object
{
outline: none;
display:block;
}
html, body {
margin:0; padding:0;
height:100%;
}
.divTable
{
width: 135px;
height: 100%;
display: table;
float:left;
background-color:blue;
}
.newDiv{
position: relative;
left:135px;
height:100%;
width:100%;
display: block;
background-color:yellow;
border:1px solid #BBBDBF;
border-left:0px;
}
.divTableRow
{
width: 135px;
height: 30px;
display: table-row;
}
.divTableCell
{
width: 135px;
height: 30px;
background: white url('Images/bottom_up.png') 0 0 no-repeat;
display: table-cell;
text-align:center;
vertical-align:middle;
}
.divTableTopCell
{
width: 135px;
height: 30px;
background: white url('Images/top_up.png') 0 0 no-repeat;
display: table-cell;
text-align: center;
border-bottom:1px solid #848385;
vertical-align:middle;
}
.divTableBottomBox
{
position:relative;
width: 133px;
height: 100%;
background-color: #d0d2d3;
display: block;
border:1px solid #BBBDBF;
clear:both;
}
.divParent{
position: relative;
display:block;
min-height:700px;
min-width:700px;
}
</style>
</header>
<body>
<div class='divParent'>
<div class="divTable">
<div class="divTableRow">
<div id = 'accountDetails' class="divTableTopCell">
Account Details
</div>
</div>
<div class="divTableRow">
<div id = 'locations' class="divTableCell">
Locations
</div>
</div>
<div class="divTableRow">
<div id = 'users' class="divTableCell">
Users
</div>
</div>
<div class="divTableRow">
<div id = 'training' class="divTableCell">
Training
</div>
</div>
<div class="divTableRow">
<div id = 'contracts' class="divTableCell">
Contracts
</div>
</div>
<div class='divTableBottomBox'>
</div>
</div>
<div class='newDiv'>
Helllo <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
</body>
</html>
Any help would be appreciated.
2 answers
solution1
0 2013-06-09 06:09:23
By the looks of it, you are marking up tabular data. If you have tabular table, it is semantically correct to use an actual HTML table. You shouldn't try to fake it with divs. They're less suited for the task and are semantically invalid.
solution2
0 ACCPTED 2013-06-09 22:29:42
Thank you for the response. I fixed it.
Here's the solution:
<!DOCTYPE html>
<html>
<header>
<style type="text/css">
object
{
outline: none;
display:block;
}
html, body {
margin:0; padding:0;
height:100%;
}
.divLeftContainer{
min-height:100%;
height:100%;
display:block;
background-color:red;
float:left;
}
.divTable
{
float:left;
width: 135px;
height: auto;
display: table;
background-color:blue;
}
.newDiv{
position: relative;
left:135px;
height:100%;
width:100%;
display: block;
background-color:yellow;
border:1px solid #BBBDBF;
border-left:0px;
}
.divTableRow
{
width: 135px;
height: 100%;
display: table-row;
border:0px;
}
.divTableCell
{
width: 135px;
height: 30px;
background: white url('Images/bottom_up.png') 0 0 no-repeat;
display: table-cell;
text-align:center;
vertical-align:middle;
}
.divTableTopCell
{
width: 135px;
height: 30px;
background: white url('Images/top_up.png') 0 0 no-repeat;
display: table-cell;
text-align: center;
border-bottom:1px solid #848385;
vertical-align:middle;
}
.divTableBottomBox
{
width: 133px;
display:block;
height:100%;
background-color: #d0d2d3;
border:1px solid #BBBDBF;
border-top:0px;
margin-bottom:0px;
bottom:0px;
}
.divParent{
position: relative;
display:block;
height:700px;
min-height:700px;
min-width:700px;
}
</style>
</header>
<body>
<div class='divParent'>
<div class='divLeftContainer'>
<div class="divTable">
<div class="divTableRow">
<div id = 'accountDetails' class="divTableTopCell">
Account Details
</div>
</div>
<div class="divTableRow">
<div id = 'locations' class="divTableCell">
Locations
</div>
</div>
<div class="divTableRow">
<div id = 'users' class="divTableCell">
Users
</div>
</div>
<div class="divTableRow">
<div id = 'training' class="divTableCell">
Training
</div>
</div>
<div class="divTableRow">
<div id = 'contracts' class="divTableCell">
Contracts
</div>
</div>
</div>
<div class='divTableBottomBox'>
</div>
</div>
<div class='newDiv'>
Helllo <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Jquery Scroll 2 Divs using ScrollTop IE9
Some jpeg images are not showing in IE8 and IE9
How to deal with IE9 html table bug where extra column shows up for some rows with partial view?
HTML table generated by JQuery not working in IE9
IE9 - Loading html table into a page with jQuery
Resizable table with squared cells
IE9 Table cells full width without floating
Using html5 quirks mode in IE9
divs stacking vertically in IE9
Rows and Columns of Html Table Resizable using Jquery
Related Tags