update classes to prevent cutoff of left side of project table

[roslynwythe]

Fixes #1927

What changes did you make?

• remove scrolling from body element and add it to tableContainer
• make table headings "sticky" so they are always visible regardless of scroll position
• it was also necessary to make changes to the zIndex (stacking order) of header and popover so that popovers appear "on top" of the table heading.

Why did you make the changes (we will use this info to test)?

• When the browser window was not extra wide, there was a horizontal scroll bar, but the user could not scroll far enough to the left to reveal the left-most columns.
• the requirement to make table headings "sticky" was not in the issue but was requested in comment

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

[entrotech]

This fix introduces another problem when you use the horizontal scroll bar and scroll to the right, the page is wider than the headers at the top of the page:

I think what we probably need to do is enclose the gird in a div that allows horizontal scrolling, instead of having the scroll bar apply to the whole page. This way, only the grid itself scrolls horizontally. Others mentioned last week that the page heading and all the stuff just above the grid should stay on-screen regardless of scroll position. Bonnie also mentioned that the column headings in the grid should be frozen (i.e. not change vertical position if you scroll vertically). Though I don't think anybody created an issue for this, it might (or might not) be easy to piggyback on this issue.

[entrotech]

This introduces another problem - see my comment on the PR with a screen shot.