All geek questions in one place

A table element in a CSS table table biases other table contents

The next table element in the "center" div causes the content in the "left" div to shift a few pixels from the top (8 in my browser). Adding some text to the table removes this offset.

Why? How to stop this without requiring a dummy line of text in front of 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>

Update0

Note that with float, I cannot get centered columns extending its contents. The source from which I extracted this example uses display: table; margin-left: auto; margin-right: auto; display: table; margin-left: auto; margin-right: auto; to center everything in the body.

+4
source share
2 answers

I managed to fix this by adding vertical-align:top; into the '#left' style.

You have to wrap the display: table-cell div in another div with display:table-row

+4
source

I assume that you have margin-top set to <table> . Take a look at Firebug.

 table { margin-top: 0; }

Any specific reason why you are so distant? You can float the div and do advanced layouts without setting display: table-cell . In addition, tables should only be used for tabular data.

0
source

Source: https://habr.com/ru/post/1303454/

More articles:


All Articles