Correct table layout generation with CSS: unexpected cells shift
I'm trying to generate a dynamic table using CSS:
<html>
<head>
<style>
div.el1, div.el2 {
color:white;
width:70px;height:70px;
border:0px;
padding:0px;
font-size: 10px;
font-family: "Courier";
}
div.el1 {
background-color: green;
}
div.el2 {
background-color: orange;
}
div.tablediv {
display: table;
border:0px;
border-spacing:0px;
border-collapse:separate;
}
div.celldiv {
display: table开发者_JS百科-cell;
}
div.rowdiv {
display: table-row;
width:auto;
}
</style>
</head>
<body>
<div class="tablediv">
<div class="rowdiv">
<div class="celldiv">
<div class="el1" id="x1y1">ABC</div>
</div>
<div class="celldiv">
<div class="el2" id="x1y2"></div>
</div>
</div>
<div class="rowdiv">
<div class="celldiv">
<div class="el1" id="x2y1"></div>
</div>
<div class="celldiv">
<div class="el1" id="x2y2"></div>
</div>
</div>
</div>
</body>
</html>
The content of body is dynamically generated and should be displayed as a table. Unfortunately, each cell shifts down if it contains data:
expected reality
--- --- --- ---
| | | | | |
--- --- |ABC|---
| | | | | |
--- --- --- ---
| | |
--- ---
I'm grateful for any help.
EDIT:
adding vertical-align: middle; to div.celldiv fixed the problem, yet I don't understand the reasons. Especially since the content is still aligned to the top of the cell.
I can help... use a table!
If it's for tabular data then using tables is perfect!
I know it's a bit of a crappy answer, but can you explain why you aren't using tables?
I think you may be confused with your intent to "move to CSS" - using CSS doesn't mean scrapping all meaningful HTML and replacing every tag with a <div>.
Using CSS for web development means using the most appropriate HTML tag, then styling it with CSS. In your case, you are making a table of tabular data, therefore you should use the <table> element as normal.
Even if your data isn't really tabular data then you still don't need to use that horrid mess of <div> tags, you only need one for each box (i.e. four tags in total), with a width, optional height, and float:left applied.
Both these solutions will be way more cross-browser than display:table anyway.
Simply add float to your cell, and you'll get the right result. Working example and code:
<html>
<head>
<style>
div.el1, div.el2 {
color:white;
width:70px;height:70px;
border:0px;
padding:0px;
font-size: 10px;
font-family: "Courier";
}
div.el1 {
background-color: green;
float:left;
}
div.el2 {
background-color: orange;
float:right;
}
div.tablediv {
display: table;
border:0px;
border-spacing:0px;
border-collapse:separate;
}
div.celldiv {
display: table-cell;
}
div.rowdiv {
display: table-row;
width:auto;
}
</style>
</head>
<body>
<div class="tablediv">
<div class="rowdiv">
<div class="celldiv">
<div class="el1" id="x1y1">ABC</div>
</div>
<div class="celldiv">
<div class="el2" id="x1y2">aaa</div>
</div>
</div>
<div class="rowdiv">
<div class="celldiv">
<div class="el1" id="x2y1">bbb</div>
</div>
<div class="celldiv">
<div class="el1" id="x2y2">ccc</div>
</div>
</div>
</div>
</body>
加载中,请稍侯......
精彩评论