0

I have a collapsible, responsive data table with adjustable width and column width that I need to apply a fixed header to.

In the table below, the header Username | Rep | Earnings | Active Game | W / L scrolls with the data and disappears immediately after scrolling down. I want this header to remain fixed, like the Steam header. Unfortunately, it is not a div tag like the Steam header, so a simple position: fixed call does not do the trick.

Here is a fiddle of my base table: https://jsfiddle.net/2vz3gndd/

To be clear, I need the Username | Rep | Earnings | Active Game | W / L header fixed, not the Steam header; as it is already easily fixed, being a div tag rather than a table

I started hoping something this simple would work:

.match-table tr:first-of-type {
   position: fixed;
   width: 100%;
 }

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.

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.

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.

In other cases, I found jquery examples, but they were using versions of jquery that were incompatible with my version (2.1.4).

I have tried approaches with the thead and tbody tag, but again, to no avail.

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 GREATLY appreciated.

SISYN
  • 2,209
  • 5
  • 24
  • 45
  • hey what do you need exactly? do you want the table header to be fixed with green header(STREAM)? – Irfan Anwar Sep 07 '16 at 19:01
  • Are you looking for something like this? https://jsfiddle.net/Vimalan/2vz3gndd/1/ (not a perfect one but, we will expand it once I clearly understand your issue) – JGV Sep 07 '16 at 19:12
  • The STREAM header seems fixed and is responsive. Please be more specific about which part we're meant to be looking at. – Whothehellisthat Sep 07 '16 at 19:13
  • Vimalan, that is close, but instead I need that blue header to stay fixed while scrolling through the table, not when the table is collapsed. I have updated my question to be more specific. Muhammad, I have replied to your answer directly. – SISYN Sep 07 '16 at 19:57
  • Try checking this stack overflow page. http://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque – NepCoder Sep 07 '16 at 20:23
  • You can try using the thead and tbody method again. Here's an example https://jsfiddle.net/matt9388/2vz3gndd/3/ It does change some of your css, and you will have to set the width of your cells. I set the tbody and tr elements to display block. – Matt Sep 07 '16 at 20:37
  • Yes that is the issue, I cannot use set-width columns. Any other ideas for a fully adaptive table? – SISYN Sep 07 '16 at 21:24
  • Any solutions that don't require a caveat such as fixed-width columns or left-aligned text? – SISYN Sep 08 '16 at 12:38

0 Answers0