Table element in CSS table-cell offsets other table-cell contents
- by Matt Joiner
The following table element in the "center" div causes the contents in the "left" divs to be offset by several pixels from the top (8 in my browser). Adding some text prior to the table removes this offset.
Why? How do I stop this from happening without requiring a "dummy" line of text before my table?
<html>
<head>
<style type="text/css">
#left {
display: table-cell;
background-color: blue;
}
#menu {
background-color: green;
}
#center {
background-color: red;
display: table-cell;
}
</style>
<body>
<div id="left">
<div id="menu">
Menu 1<br>
Menu 2<br>
</div>
</div>
<div id="center">
<table><tr><td>This is the main contents.</tr></td></table>
</div>
<div id="left">
<div id="menu">
Menu 1<br>
Menu 2<br>
</div>
</div>
</body>
</html>
