Using a "stand alone" "display: table-cell;" on a div works; but is this allowed?

Question

edit: edit made because of comments:

I asked, because I can't find a doc about, where is what display:xxxx; allowed.

I asked, because I can "feel" that a rendering engine can "understand" what it means to be a rectangle be rendered like a table-cell not like a block, even without a table-row around

but I am not sure ...

I do not ask for workaround like scripting (I do not mind, its just not the question)

original:

I am still confused about some display properties values (ie. the table ones);

I want (need) a table (or table like construct), that allows me to style the "row". The problem is, that the data to display, is in fact calling for a HTML <table> (means: I have no controll of the text inside the cells, like in an invoice, ist not just formating static data)

I can (could) solve my prob like shown in the code snipped below, if i just replace the table things like that (a short cut, I hope its clear what I mean)

table tr td td td tr td td td

with

div div div display:table-cell; div display:table-cell; div display:table-cell; div div display:table-cell; div display:table-cell; div display:table-cell;

Just tell the inner DIV to display as/like table-cell makes them same hight, and vertical-align does like cell should, and all is fine

so again the question: But is this allowed, altough it works?

what confuses me is, that if I do what I often read (here) i should make it like that:

div **display:table** div **display:table-row** div display:table-cell; div display:table-cell; div display:table-cell; div **display:table-row** div display:table-cell; div display:table-cell; div display:table-cell;

but that is the same like table, tr, td (how I would expect), so why should I use it?

on the other hand (I did not try that so far) what happens to

table tr **display:inline-block** td td td tr **display:inline-block** td td td

.no-table { display:inline-block; display:inline-table; border:3px solid brown; padding:3px; } .no-row { display:block; /* display:table-row; */ border:3px solid blue; padding:3px; margin-bottom:3px; } .cell { display:table-cell; border:3px solid green; width:40px; max-width:40px; vertical-align: middle; overflow:hidden; }

<div class='no-table'> <div class='no-row'> <div class='cell'>text</div> <div class='cell'>texttexttext</div> <div class='cell'>text</div> </div> <div class='no-row'> <div class='cell'>text</div> <div class='cell'>text text</div> <div class='cell'>text</div> </div> <div class='no-row'> <div class='cell'>text text text</div> <div class='cell'>text</div> <div class='cell'>text</div> </div> </div>

Once again the question(s): is the use of a "stand alone or out of context" display: somthing allowed? And if it behaves like expected, will it work tomorrow, too?

Your second code block is legal I think (table-cell can be applied to a div but it always needs to be surrounded by a table-row element etc.) but why do it in the first place? That stuff is insane. Just use a <table>. — Pekka
– Pekka, Commented Apr 23, 2015 at 18:53
@Pekka웃: I need a background image behind the row (not the cells) — halfbit
– halfbit, Commented Apr 23, 2015 at 19:00
Ah, I see. Maybe this helps? I've never tried it myself but it looks promising. — Pekka
– Pekka, Commented Apr 23, 2015 at 19:08
@halfbit if by allow you mean validates in the validator then yes it validates. Personally, I usually put the table-cells inside of a table — Huangism
– Huangism, Commented Apr 23, 2015 at 20:28
@halfbit ok I am not sure what you meant by the last comment but basically, if it works for you then do what you gotta do — Huangism
– Huangism, Commented Apr 23, 2015 at 20:35

vals · Accepted Answer · 2015-04-24 15:05:57Z

Let's say that it is "tolerated"

w3c standard

layout-specific leaf types

These display types require their parent to be of a particular display type, but can accept any display-inside value. For example, a table-caption box must have a table parent, but can establish any kind of formatting context for its children.

Boxes with layout-specific types generate wrapper boxes around themselves when placed in an incompatible parent, as defined by their respective specifications.

So, in the first paragraph, it is specified that they must have a table parent.

But in the second paragraph, it is said that if you don't do that, the browser will fill it automatically. So, somehow, you could say that it is allowed

I would give an extra +1 for finding then 'doc-needle in the doc-haystack', at least I now know that it is named 'layout_specific-leaf-types'

Collectives™ on Stack Overflow

Using a "stand alone" "display: table-cell;" on a div works; but is this allowed?

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related