Can I use table-cell as a stand alone style?
cross-browser, css, html
Solution
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.
Problem
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> ```