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 ``. — Pekka, Apr 23 '15 at 18:53
@Pekka웃: I need a background image behind the row (not the cells) — halfbit, Apr 23 '15 at 19:00
Ah, I see. Maybe [this](http://stackoverflow.com/a/670498/187606) helps? I've never tried it myself but it looks promising. — Pekka, Apr 23 '15 at 19:08
@Pekka웃 where can I find the documentation that says a `table-cell` needs to be surrounded by `table-row`? — Huangism, Apr 23 '15 at 19:36
@Huangism you're right, there doesn't seem to be such a requirement. I always thought there was. The specs seem to say (on superficial reading) that the client must generate any missing elements. http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes — Pekka, Apr 23 '15 at 19:40
However, if you make a div behave like a `tr` chances are it will become as un-stylable as the `tr` element itself. — Pekka, Apr 23 '15 at 19:41
I think it will validate but sometimes it doesn't work that well unless it is in the 'table' structure — Huangism, Apr 23 '15 at 19:42
@Pekka웃: there is no element missing. all are here, the questionwas a (not html part) css display: something - like display:none isnt missing for HTML — halfbit, Apr 23 '15 at 20:23
@Huangism: thats - more ore less - my question, "allowed or not allowed, thats the question!" in modern html theater — halfbit, Apr 23 '15 at 20:25
@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, Apr 23 '15 at 20:28
@Huangism: sure it does! html != css, ttry , it will validate, but look at browsers behaviour — halfbit, Apr 23 '15 at 20:31
@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, Apr 23 '15 at 20:35

score 1 · Accepted Answer · answered Apr 24 '15 at 15:05

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' — halfbit, Apr 26 '15 at 10:40

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

1 Answers1