Because of that oft-cited bug with positioning inside table cells (https://bugzilla.mozilla.org/show_bug.cgi?id=63895), display:table should be checked carefully in Firefox.
I saw a mention that Firefox 31 may finally fix this, but a good practice may be to include an extra div without table-* properties... just in case.
If anyone has more specific info on this, please share! Don't want to lead anyone astray.
good point.. let me do some findings and I will update the article if the bug still exist
Just wan't to point out one little thing that I have experienced. I used the display: table in a project about a year ago, but fund out that when you combine display: table and box-sizing: border-box you run into a lot of bug and wired behaviors form browsers... and it is very hard to find fix because the different browsers produce completely different bugs. So in the end I had to do a lot of workarounds to get the layout working.
Just a little heads up for anyone who whats to try this out.
Any chance you have examples of this? Just wondering, as I haven't run into issues myself with this, but can imagine there being very strange bugs at times. I know I've had to use border-collapse (https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse) with display: table at least once or twice to make it work "right."
Are you using border-box on the element with display:table? Try creating another div within that element and use border-box on the inner div instead.
Does using table styles affect how the content is read by machines? Will the content be perceived as tabular data?
As far as I know, no, because it's not technically a table, just a table-esque presentation layer. It's still semantically HTML in a DIV or SECTION or NAV or whatever.
The blog post is from 2011 and hopefully both ORCA and NVDA has changed how it reads CSS tables but here are some information: http://www.456bereastreet.com/archive/201110/using_displaytable_has_semantic_effects_in_some_screen_readers/