Sticky header, center columns, highlight rows based on value

Hi,

thanks for your question, and sorry for the trouble.

Unfortunately, your link is not working for me, and only giving a Not found error ??
Is that really a published page?

Regards,
Tobias

Sorry, the page was not published. I was thinking the link would take you to the draft preview. I have published it now to help you view and the link is below.

https://davisrowing.org/race-results-tablepress-table/

Hi,

Thanks for the link! Now it’s working for me! (Drafts are only accessible by logged-in users, which is why I could not see that page.)

Ok, let’s look at the things separately:

1) FixedHeader: This is in principle working, from what I can see. You might want to use the offset Shortcode parameter that is mentioned on the Extension’s page, to have the header row still below your page’s navigation bar.

2) Text centering is also working for me.

3) Row highlighting of empty rows: This is rather tricky, and unfortunately, the approach that you describe won’t be possible like that. What you could do is add an extra column to the table (which you should then hide from the visitor with CSS code, like

.tablepress-id-1 .column-7 {
  display: none;
}

), into which you add a “keyword” in all empty rows (something like row-empty).
Then, you could use that keyword for the Row Highlight Extension, i.e. an extended Shortcode like

[table id=1 datatables_fixedheader=top datatables_fixedheader_offsettop=80 row_highlight="row-empty" /]

and with extended “Custom CSS”:

.tablepress-id-1 .highlight-row-empty td {
  background-color: blue !important;
}

Note however that sorting the table would move all empty rows to the beginning/end of the table, so that you would lose the visual separation.

Regards,
Tobias

The fixed header was not working in the preview of a draft but appears to be working in the published page. Same with the centering of the column text.

I did put the following in the shortcode:

[table id=1 datatables_fixedheader=top /]

I also put the following in the custom CSS section of the the plugin options to make the header row a little taller so that the header text fit in there and the columns didn’t get too wide.

.tablepress-id-1 .row-1 td {
padding-top: 20px;
padding-bottom: 20px;
}

What else am I supposed to do to make the fixed header stay below the navigation bar? And is there anything I can do to make the fixed header use the entire height of the header row vs it seems to be chopping off part of the header when it becomes fixed.

Roger

would the keyword just be typed into the empty row cells on column 7 or would I need to type in “row-empty” in every column on each empty row?

I see part of the change you gave me to the shortcode was taking care of keeping the fixed header below the navigation bar.

Do I need to add something to the short code to tell it to look for the keyword “row-empty” in column 7?

To be clear the fixed header and the centering of columns is working. I added a 7thy column and it is hidden using the custom CSS code you provided. The only issue is the row highlighting.

I have installed the TablePress Extension: Row Highlighting

I have the following in the short code:

[table id=1 datatables_fixedheader=top datatables_fixedheader_offsettop=115 row_highlight=”row-empty” /]

I have this in the custom CSS under the plugin options:

.tablepress-id-1 .column-7 {
display: none;
}

.tablepress-id-1 .highlight-row-empty td {
background-color: blue !important;
}

In the table in the cell of row 2 and column 7 I typed “row-empty” without the quotes.

Row 2 is not highlighted blue. What am I missing?

Sorry for not being able to follow your instructions better, as you can tell I am a beginner. Thanks for your patience.

Roger

Hi,

ah, sorry, I had a typo in the CSS. Please change

.tablepress-id-1 .highlight-row-empty td {
  background-color: blue !important;
}

to

.tablepress-id-1 .row-highlight-row-empty td {
  background-color: blue !important;
}

You will only need that row-empty text in the column 7 cell.

And I recommend to reduce that datatables_fixedheader_offsettop=115 to datatables_fixedheader_offsettop=80, as that seems to be the height of your navigation bar.

Regards,
Tobias

Thanks Tobias, that worked for the highlighting. Will save me a lot of time as I won’t have to write code for every empty row. I know I will lose that visual highlight separating years if a user decides to sort by column, but many won’t do that.

On the height of the header, I had used 115 as that was matching up with the shading around the bottom of the navigation bar. Making it 80 chops off some of the letters in “Friends of Davis Rowing” on the left of the navigation bar when viewing the website on a PC. But, I have noticed that when viewing on a mobile device the menu bar is not there and the taller the header is the more centered the header is when scrolling down through the table, obstructing the view for the user. Not sure how to fix that. Any ideas?

On a PC the final column 6 sits right under the “search” box. and nicely fills out the page. On a mobile device the columns are narrower and don’t take up all the space on the mobile screen. Instead of lining up even with, right aligned, with the search field, they are pushed to the left. This makes the rows taller and limits the number of rows that can be seen on the mobile device. I have the column widths set to all be 15px. Changing them to 25px or more doesn’t seem to make a difference. The columns only use up about 2/3 of the width of the screen on a mobile device when turned landscape.

Is there any way to utilize the rest of the space on the phone?

Roger

Hi Roger,

good to hear that the highlighting will help!

As for mobile devices: You could hide the fixed header row on small screens. For that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

@media screen and (max-width:800px) {
  .tablepress.fixedHeader-floating {
    display: none !important;
  }
}

As for the widths: I don’t see the columns being too small, instead, they are actually extending beyond the edge of the screen, so that parts of the right-most columns are not visible. The columns simply require more width than those 15 or even 25px (more like 70px, at least). You would therefore need a solution for responsiveness, e.g. one of the four modes that the TablePress Extension from https://tablepress.org/extensions/responsive-tables/ offers.

Regards,
Tobias

Tobias,

I really appreciate all the time you are giving me on this. I still like having the fixed header even on the mobile device. Is there a way to get it to stay fixed closer to the top of the mobile screen? We used the code below to fix the header at 80 pixels below the top of the webpage on a PC. Is there a separate command to fix the header in a location only on a mobile device?

[table id=1 datatables_fixedheader=top datatables_fixedheader_offsettop=80 row_highlight=”row-empty” /]

For the width of the columns, if I change the width to 15px to 200px and there is no change to the way it looks on a pc or the mobile device. I am using an Apple Iphone, maybe different on an Android device. On my apple device when I hold the phone on “portrait” part of column 6 is chopped off. The same amount is chopped off whether the column width is 15 or 200. The search field is placed on top of the header hovering over columns 3 through 5. When I turn the phone on its side in landscape, then the columns do not take up the full width of the screen. The search field is then as far right as possible on the mobile screen and the far right side of column 6 is lined up even with the colon in “Search: [ Field ]. Is there a way to get the 6 columns to take up all of the space? The four options listed in the “responsive tables extension 1.7″ don’t seem to apply. Flip, collapse and stack won’t seem to work. I installed the extension and tried scroll. I put the below in the shortcode.

[table id=1 datatables_fixedheader=top datatables_fixedheader_offsettop=80 row_highlight=”row-empty” responsive=scroll responsive_breakpoint=”phone” /]

Right now this is in the plug in options section under custom CSS. I made the width 200px just to test and see what happens. I don’t see any big difference between 200px and 20px.

.tablepress-id-1 .column-1,
.tablepress-id-1 .column-2,
.tablepress-id-1 .column-3,
.tablepress-id-1 .column-4,
.tablepress-id-1 .column-5,
.tablepress-id-1 .column-6 {
width: 200px;
}

The only change to the view on the phone in portrait is that the sixth column is not showing at all vs half showed before. The scroll bar seems to be sitting at the very end of the table instead of at the end of the mobile screen. It is also barely visible and disappears and gets mixed up with the phone’s navigation menu at the bottom of the screen.

When the phone is turned to landscape view, the visibility is the same as without the extension and shortcode adjustment made above.

Thanks,

Roger

Hi Roger,

you could get the FixedHeader to move to the top by replacing the CSS from above with

@media screen and (max-width:800px) {
  .tablepress.fixedHeader-floating {
    top: 0!important;
  }
}

Now, for that width problem: This is the classical problem of responsiveness. The table will be cut off in portrait mode because the content simply requires more width. Reducing the column widths below that minimum width that the content requires is not possible. You will need one of the approaches from the Responsive Tables Extension.

As for the problem of rotating the device from portrait to landscape: Unfortunately, this does currently not trigger a “re-calculation” of the column widths, so that the widths from portrait mode are still used in landscape mode, resulting in the columns not filling the space. If you then however reload the page, things will be fine again. Unfortunately, I haven’t yet found a way to make this automatic.

As for the scroll bar: Yes, this is always shown at the bottom of the table, because it’s the table that is scrolling here and not the full screen.

Regards,
Tobias

That works great. Hard to believe I got so much help directly from the creator of the plugin. Thank you very much.

Roger

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!