I have a site with a very active background (I'm talking 6 or so different z-indexes here 2 with animations). I wanted a in the foreground that had content but wanted a "window" through to the background in it. Some problems I had:
you can't "punch a hole" in a background, so...
No matter how hard I tried, the "right" div wouldn't fill the space between the "top" and "bottom" divs, I tried a lot of different things. The reason it had to be dynamic is that the text in the "left" div was dynamic based on the background colour, which was itself generated randomly with JavaScript.
How is display: table; and all the other related CSS code like tables? And how can it be used?
This question is related to
html
css
css-tables
It's even easier to use parent > child selector relationship so the inner div do not need to have their css classes to be defined explicitly:
.display-table {_x000D_
display: table; _x000D_
}_x000D_
.display-table > div { _x000D_
display: table-row; _x000D_
}_x000D_
.display-table > div > div { _x000D_
display: table-cell;_x000D_
padding: 5px;_x000D_
}
_x000D_
<div class="display-table">_x000D_
<div>_x000D_
<div>0, 0</div>_x000D_
<div>0, 1</div>_x000D_
</div>_x000D_
<div>_x000D_
<div>1, 0</div>_x000D_
<div>1, 1</div>_x000D_
</div>_x000D_
</div>
_x000D_
How (and why) to use display: table-cell (CSS)
I just wanted to mention, since I don't think any of the other answers did directly, that the answer to "why" is: there is no good reason, and you should probably never do this.
In my over a decade of experience in web development, I can't think of a single time I would have been better served to have a bunch of <div>
s with display
styles than to just have table elements.
The only hypothetical I could come up with is if you have tabular data stored in some sort of non-HTML-table format (eg. a CSV file). In a very specific version of this case it might be easier to just add <div>
tags around everything and then add descendent-based styles, instead of adding actual table tags.
But that's an extremely contrived example, and in all real cases I know of simply using table tags would be better.
The display:table
family of CSS properties is mostly there so that HTML tables can be defined in terms of them. Because they're so intimately linked to a specific tag structure, they don't see much use beyond that.
If you were going to use these properties in your page, you would need a tag structure that closely mimicked that of tables, even though you weren't actually using the <table>
family of tags. A minimal version would be a single container element (display:table
), with direct children that can all be represented as rows (display:table-row
), which themselves have direct children that can all be represented as cells (display:table-cell
). There are other properties that let you mimic other tags in the table
family, but they require analogous structures in the HTML. Without this, it's going to be very hard (if not impossible) to make good use of these properties.
Source: Stackoverflow.com