TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

The Anti-hero of CSS Layout – “display:table”

130 pointsby p0larboyover 10 years ago

16 comments

pcwaltonover 10 years ago
As someone who just implemented automatic table layout and is now intimately familiar with the details of how it works, I&#x27;d like to suggest that the problem with table-based layout is that <i>it&#x27;s excessively complex</i> and <i>largely undocumented and unspecified</i>. The results will differ between browsers. Even the parts that have draft specs (which don&#x27;t include, for example, percentage heights) are much more complex than CSS blocks and inlines: look at sections 4.1 through 4.4 of [1] for example.<p>[1]: <a href="http://dbaron.org/css/intrinsic/" rel="nofollow">http:&#x2F;&#x2F;dbaron.org&#x2F;css&#x2F;intrinsic&#x2F;</a>
评论 #8516179 未加载
darrhiggsover 10 years ago
<i>&gt;&gt; E8 and IE9 still make up 32% of the browser market share and that is a lot to give up if I was to revert to the flex solution</i><p>Yes, if you have an even worldwide visitor share. Can I Use[0] puts USA IE9 usage at 3.86% and IE8 at 7.28% (11.14% in total). If your user base is different it would be wise to examine the data before discounting flex-box based on worldwide stats.<p>If anyone has access to netmarketshare&#x27;s USA[1] (used in the article) data, it would be nice to see what it is.<p>EDIT: Also the article&#x27;s stats[2] are for desktop only. It seems[2] that mobile support is relatively high with Can I Use[0] stating that total USA support = 86.46%.<p>[0] <a href="http://caniuse.com/#search=flexbox" rel="nofollow">http:&#x2F;&#x2F;caniuse.com&#x2F;#search=flexbox</a> [1] <a href="http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&amp;qpcustomd=0&amp;qpaf=-000%09101%09US%0D" rel="nofollow">http:&#x2F;&#x2F;www.netmarketshare.com&#x2F;browser-market-share.aspx?qpri...</a> [2] <a href="http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&amp;qpcustomd=0" rel="nofollow">http:&#x2F;&#x2F;www.netmarketshare.com&#x2F;browser-market-share.aspx?qpri...</a>
评论 #8515071 未加载
评论 #8515114 未加载
评论 #8516427 未加载
评论 #8518023 未加载
DigitalSeaover 10 years ago
I remember the anti-html table movement fondly. While everyone knew tables were bad for certain purposes, the hate movement brainwashed people into thinking that using tables for anything (including tabular data) was bad. And so, people started marking up tabular data using DIV&#x27;s and CSS properties that suffered from a myriad of compatibility issues, convincing themselves that using floats was the right thing to do.<p>And we all bought into it, well most of us. Every time an overzealous developer would spot the use of a table tag, hell would reign down upon Earth lambasting the developer for using a table, even if it was being used for the right purpose. &quot;how dare you use a table you noob, use floats and DIV&#x27;s, they are so much better&quot; - for a good while people were hating on using the table tag to the point where many were hating it, but could not really tell you why other than, &quot;because tables are bad&quot;<p>In many ways the web has gone full circle, Flexbox is merely a more powerful CSS version of tables, in-fact there are many similarities like the ability to have columns of content of varied size sitting alongside one another. We added in a new set of properties, changed the name and made them a little bit more powerful.<p>I am one of those developers who have been quietly using display table for non-tabular data for a while now to solve issues I have seen other developers resort to additional markup and CSS hacks for, that either makes me a lazy developer, an efficient developer or perhaps both.<p>Just recently I proved a remote developer wrong in regards to responsive tables. He tried telling me and the business responsive tables cannot be done without hacks. I implemented a solution using display table and DIV&#x27;s. This is for part of an app that only logged in users see, not search engines, so while it was not a true proper use of the properties, it allowed me to implement a true responsive solution for tables that will not degrade SEO or performance, as it is not public.<p>Simply using media queries I was able to make my table DIV&#x27;s collapse by setting them to display block, adding in some type and colour adjustments, and it just worked. No need to use before and after pseudo selectors to hack in support for titles and stacked tables. No hair pulling when the business asked me to support IE9 either.<p>As developers we all mostly want to do everything correctly and use the proper tags and CSS properties in the appropriate way, but sometimes when you have a deadline to meet and time is running out, you have to do what you have to do to get things done.
评论 #8517958 未加载
评论 #8517429 未加载
评论 #8517787 未加载
评论 #8518042 未加载
insinover 10 years ago
It still takes me a few beats from thinking &quot;I need a flexible grid layout here&quot; to remembering I can just use display:table, having spent so many years discounting it off-hand because of Internet Explorer.
评论 #8515132 未加载
评论 #8517142 未加载
yoklovover 10 years ago
The biggest downside of display: table and friends is performance. Changing any CSS or DOM properties will basically cause a full page (!) relayout and repaint on a lot of browsers (especially mobile safari).
评论 #8518550 未加载
scotty79over 10 years ago
If you use table for layout, remember to also use<p><pre><code> table-layout: fixed;</code></pre> It will improve table behavior (content will no longer affect horizontal layout of the table) and performance, saving repaints, reflows and whatnots.
评论 #8518802 未加载
vixen99over 10 years ago
&#x27;I absolutely dissent HTML table-layout&#x27;. Don&#x27;t you have to dissent from?
评论 #8515334 未加载
rporrataover 10 years ago
We have come full circle. Tables to CSS grid based frameworks back to Tables?<p>Tables are generally for structured content. They work and are perfect - Excel for example. Hundreds of cells on a page? Rendering &#x2F; performance would be a nightmare.<p>CSS grids for layout - perfect and may cause some pain. Once you get it right the performance is there.<p>With css&#x2F;tags there can be abuse and we must think of how we plan to present our content to the user who ultimately judges our work.<p>They do not care about the how it was implemented, they just want it now and that it works consistently.<p>We need to ensure <i>we keep our sanity</i> the balance is in between the two.<p>On another note, the use of colgroups should be mentioned with the above. It does help with rendering performance. <a href="http:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;html5&#x2F;single-page.html#the-colgroup-element" rel="nofollow">http:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;html5&#x2F;single-page.html#the-colgroup-ele...</a><p>- Enjoy!
radoover 10 years ago
My IE8+ grid is based on display: table and just works. <a href="http://natuive.net" rel="nofollow">http:&#x2F;&#x2F;natuive.net</a>
avighnayover 10 years ago
&gt;&gt; the holy grail layout<p>gave me an instant smile, I remember 7 years back, wracking my brains out to get it done for a project!
igvadaimonover 10 years ago
What I didn&#x27;t understand from this blog post is WHY display:table is really bad.
评论 #8514921 未加载
评论 #8514943 未加载
评论 #8515412 未加载
评论 #8515044 未加载
评论 #8514987 未加载
amwellesover 10 years ago
I&#x27;ve been using this in some of my latest projects. Works like a charm!
rpwverheijover 10 years ago
interesting! will look this up again when I have one of the described problems. In the meanwhile, I&#x27;ll push an update to my brain: not everything related to tables is old &#x2F; bad!
lacooljover 10 years ago
This is the most appropriately-named article, ever.
blablabla123over 10 years ago
Most of the examples can be achieved with flex layouts, Stylus+nib even manages the browser prefixes for you. Just mentioning this, because last week I considered a {HTML|CSS} table layout. As it turned out, solving the problem with tables was more difficult than using other methods...
addict3dover 10 years ago
You can achieve the same results with absolute positioning, which I prefer.
评论 #8514873 未加载
评论 #8514884 未加载