Add Fixed Header to Responsive Data Table with auto width <p>I have a collapsible, responsive data table with adjustable width and column width that I need to apply a fixed header to.</p> <p>In the table below, the header <code>Username | Rep | Earnings | Active Game | W / L</code> scrolls with the data and disappears immediately after scrolling down. I want this header to remain fixed, like the <code>Steam</code> header. Unfortunately, it is not a <code>div</code> tag like the <code>Steam</code> header, so a simple <code>position: fixed</code> call does not do the trick.</p> <p>Here is a fiddle of my base table: <a href="https://jsfiddle.net/2vz3gndd/" rel="nofollow">https://jsfiddle.net/2vz3gndd/</a></p> <p>To be clear, I need the <code>Username | Rep | Earnings | Active Game | W / L</code> header fixed, not the <code>Steam</code> header; as it is already easily fixed, being a <code>div</code> tag rather than a <code>table</code></p> <p>I started hoping something this simple would work:</p> <pre><code>.match-table tr:first-of-type { position: fixed; width: 100%; } </code></pre> <p>But like I said, after trying far more complex solutions and still being no closer to achieving my goal, I am feeling a bit defeated.</p> <p>I've searched similar questions, tried countless solutions from other questions on SO, but none of them seem to work in my example, which is a responsive data table that uses table headers to create "sub-tables" when in mobile view.</p> <p>I tried several pure CSS solutions but all of them required special conditions, such as the table header text had to be left aligned, which isn't acceptable in my case. Many others required fixed width tables, cells, or both; again, not acceptable for this purpose.</p> <p>In other cases, I found jquery examples, but they were using versions of jquery that were incompatible with my version (2.1.4).</p> <p>I have tried approaches with the <code>thead</code> and <code>tbody</code> tag, but again, to no avail.</p> <p>I have been racking my brain over this for more than 12 hours now and although it may be a simple fix or plugin, I can't seem to find it or figure it out so any help would be <strong>GREATLY</strong> appreciated.</p>