html - Can I use table-cell as a stand alone style?

Question

When using the CSS display:table-cell on an element, is it somehow preferred/required that it's parent elements have display:table-row, and display:table?

Can this stand alone in a document?

<div style="display:table-cell;">content</div>

Or in table tag fashion, should I nest some additional parent tags with appropriate styles?

<style>
.table {display:table;}
.tr {display:table-row;}
.td {display:table-cell}
}
</style>
<div class="table">
  <div class="tr">
    <div class="td">content</td>
  </div>
</div>

Using display:table-cell is a good trick for laying out elements on the same line (especially since no white space is rendered between them) but I'm wondering if it is just that: a trick. Can I expect that the behavior may change at some point in the future?

Is this stylistically incorrect? It appears to display consistently across all (modern) browsers (IE7 and lower doesn't support display:table-cell)

<style>
.cell {
  display:table-cell;
  padding:0px 5px;
  background-color:#aaaaaa;
}
</style>
<div>
  <span class="cell">option one</span>
  <span class="cell">option two</span>
  <span class="cell">option three</span>
</div>

Answer 1

You are free to do it either way. If table and table-row elements are not provided, anonymous ones will be inserted for you (as long as the browser follows the W3C specification).

http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element.

Keep in mind that anonymous elements cannot be styled. This is only an issue if there isn't enough content within your table-cell elements for them take up 100% of their parent's width. In this case, only a table element is necessary, you can drop the table-row.