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?
content Or in table tag fashion, should I nest some additional parent tags with appropriate styles?
content 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)
option one option two option three
回答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.