Making Tables Responsive with Minimal CSS
There are other approaches which avoid the repetition of column names in SPAN chunks as suggested in the article.<p>The most elegant and least bandwidth consuming one is described in <a href="https://css-tricks.com/responsive-data-tables/" rel="nofollow">https://css-tricks.com/responsive-data-tables/</a> and uses modern CSS selectors:<p><pre><code>   td:nth-of-type(1):before { content: "Type of Food"; }
   td:nth-of-type(2):before { content: "Calories"; }
   td:nth-of-type(3):before { content: "Tasty Factor"; }
   ...</code></pre>