Fixed Table Heading

[patrishmo]

Is it possible to fix the table heading row in place so it is still visible while you are scrolling through a table? I'm using HTML5 as my skin and have some very long tables. Is there a way for the user to still see the heading as they scroll through the very long table?

[Nita Beck]

You might be able to create a "nonscrolling" class of the <thead> tag and define the class to have a fixed position. According to w3schools.com, the <thead> element, along with other table elements such as <tbody> and <tfooter> are used to

...specify each part of a table (header, body, footer).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer.

http://www.w3schools.com/tags/tag_thead.asp

I've never tried this myself so can't offer how-to steps, but it looks like in theory it can be done. I did look in Flare's stylesheet editor and one can set the "position" attribute on the thead tag.

[Psider]

I used the DataTables jquery package to get non-scrolling headers (plus fancy sorting etc) into one project. It took some faffing around because I'm not familiar with jquery and the documentation 1. is aimed at developers 2. looks to have been written over time and switches methods partway through. But once I figured out where and what, it worked rather nicely.

Unfortunately I don't have access to Flare or the code I did any more, so not sure I'll be much help if you decide to have a play.

https://datatables.net/

[kel322]

I've been trying to figure this out myself, and while I have a better understanding of how it works in CSS, I can't get it to work with my Flare project -- I think it has to do with some of the ways that I've formatted my table using the Flare style editor. I've tried getting rid of some of those styles, rewriting code, etc., but it just doesn't work just right. Every time I make progress, something else doesn't display properly. Regardless, I thought I would pass along the tidbits I have picked up:

• As Nita mentioned, you need to separate the table head from the rest of the table. I think this is done in the CSS by

  Code: Select all

  thead {
  display: block;
  }
  tbody {
  display: block;
  }
  

• The table and columns need to have a defined width. I used a px value for the table and a percentage for the columns.
• The table-layout property should be fixed. This makes the table rows the same size based on the first row.
• You need to define the height of the table body. Otherwise, the table body as no reason to scroll.

The best resource I found about fixed table headers using CSS was at: https://codepen.io/tjvantoll/pen/JEKIu

If anyone has successfully done this, please pass it along!

[Phlawm53]

------
When you specify tbody, thead, and so on, are you doing that in your project CSS? If so, are you also using a table style defined in a Flare Table CSS file? (Content Explorer -> Resources -> TableStyles -> SomeTableName.css)

If yes, you may want to try the following:

1. In Flare's XML editor, insert the named table style.
2. View the XML for the inserted table. The table class will be of the form class="TableStyle-SomeTableName" where SomeTableName corresponds to the name of the Flare Table CSS file.
3. In your project CSS, apply the named style to the table elements you're trying to configure. So using the preceding general form, you'd end up with, say, thead.TableStyle-SomeTableName.

Also, when I'm chasing CSS issues I like to temporarily add brightly colored borders or text to help me verify I'm working with the correct CSS medium, CSS property, et cetera.

Cheers & hope this helps,
Riley
SFO