CSS styling and fixed column 1

Hi,

thanks for your post, and sorry for the trouble.

In the first part, with the header colors, you would have to replace the general .tablepress class with the table-ID-based class, i.e.

.tablepress-id-1thead th,
.tablepress-id-1 tfoot th {
  background-color:  #B82601;
  color: #ffffff;
}

For the alignment and width, numbers have to be used instead of letters, in the column CSS selector, i.e. use .column-2 instead of .column-B and so on.

Regards,
Tobias

Thanks, its a step in the right direction.

The new code I’ve added is: `.tablepress-id-1 thead th,
.tablepress-id-1 tfoot th {
background-color: #B82601;
color: #ffffff;
}

.tablepress-id-1 .column-2 td,
.tablepress-id-1 .column-3 td,
.tablepress-id-1 .column-4 td
.tablepress-id-1 .column-5 td {
vertical-align: middle;
}

.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 {
width: 180px;
text-align: center;
}

.tablepress-id-1,
.tablepress-id-1 tr,
.tablepress-id-1 tbody td,
.tablepress-id-1 thead th,
.tablepress-id-1 tfoot th {
border: 1px solid #f1f1f1;
}`

End result:

I need the first column to remain left aligned and bolder text.
The last two columns are still narrow.

There’s an odd extra line under the header?

It’s not working very well responsively and I still need the first column to remain fixed like the first column on this site:

Would be happy to donate if these issues can be resolved or do I need to consider another plugin to get the functionality required.

Regards
Neil

Meant to say, the reason I used letter and not numbers for my columns was because they are shown with letters where you edit table content.

Sorry, I spotted some missing ‘ in my css but still not the end result I’m looking for.

.tablepress-id-1 thead th,
.tablepress-id-1 tfoot th {
	background-color: #B82601;
	color: #ffffff;
}

.tablepress-id-1 .column-1 td,
.tablepress-id-1 .column-2 td,
.tablepress-id-1 .column-3 td,
.tablepress-id-1 .column-4 td,
.tablepress-id-1 .column-5 td {
	vertical-align: middle;
}

.tablepress-id-1 .column-2,
.tablepress-id-1 .column-3,
.tablepress-id-1 .column-4,
.tablepress-id-1 .column-5,
 {
	width: 180px;
	text-align: center;
}

.tablepress-id-1,
.tablepress-id-1 tr,
.tablepress-id-1 tbody td,
.tablepress-id-1 thead th,
.tablepress-id-1 tfoot th {
	border: 1px solid #f1f1f1;
}

I managed to find and have installed and inserted the code `[table id=1 datatables_fixedcolumns_left_columns=1 datatables_fixedcolumns_right_columns=0 /]
` in my page under the code with table ID.

The page now shows two versions of the table, the second of which has some glitch with the column one that does not freeze in place.

As this is proving so difficult, is it possible to commission you to sort it?

Thanks
Neil

• This reply was modified 2 years, 3 months ago by rubberneil.

Hi Neil,

for this to work, you would first actually have to download, install, and activate the TablePress Extension from https://tablepress.org/extensions/datatables-fixedcolumns/ as a new plugin on the site.

For the CSS, there’s a small mistake (an extra comma right before a {), and you could then also shorten it to

.tablepress-id-1 thead th {
	background-color: #B82601;
	color: #ffffff;
	border: 1px solid #f1f1f1;
}

.tablepress-id-1 tbody td {
	width: 180px;
	border: 1px solid #f1f1f1;
	text-align: center;
	vertical-align: middle;
}

Regards,
Tobias

Hi Tobias

I have already got the other plugin installed.

This is code now in place:

.tablepress-id-1 thead th,
 {
	background-color: #B82601;
	color: #ffffff;
}

.tablepress-id-1 tbody td,
 {
	vertical-align: middle;
}

.tablepress-id-1 .column-2,
.tablepress-id-1 .column-3,
.tablepress-id-1 .column-4,
.tablepress-id-1 .column-5 {
	width: 180px;
	text-align: center;
}

.tablepress-id-1,
.tablepress-id-1 tr,
.tablepress-id-1 tbody td,
.tablepress-id-1 thead th,
.tablepress-id-1 tfoot th {
	border: 1px solid #f1f1f1;
}

and the result:

Still an odd extra red line under the header.
The fixed column not functioning.
The left column not being left aligned.
Columns 2 to 5 not keeping their widths when viewed on smaller windows.

Any suggestions please?

Happy to allow site access if required.

Regards
Neil

Hi Neil,

are you trying after clearing your site’s Autooptimize cache?

Also, there are still issues in your CSS code. As mentioned above, there must not be a comma right before the {. Please try with my CSS code:

.tablepress-id-1 thead th {
	background-color: #B82601;
	color: #ffffff;
	border: 1px solid #f1f1f1;
}

.tablepress-id-1 tbody td {
	width: 180px;
	border: 1px solid #f1f1f1;
	text-align: center;
	vertical-align: middle;
}

.tablepress-id-1 tbody td {
    background-color: #ffffff;
}

This will also add a background color to the first column, to make sure that the text is readable.

I’m not sure about the extra red row though. This could be caused by the added border lines. Can you therefore maybe try without the two

border: 1px solid #f1f1f1;

lines in the CSS? (Note that vertical borders are not recommended in tables anyways, as they make reading the table harder.)

Regards,
Tobias

Thanks Tobias

I’ve got it very close now to what I’m wanting and just have the one issue I’d like to sort out please if you can advise, plus a query.

The table looks perfect now on desktop:

On narrow windows/mobile it seems to an extra slider bar at the bottom of column 1 which should not be there. What can I do to get rid of it?

Finally, I can view the new table in Chrome but when I view in Safari, Edge or Firefox it still shows like it did when I first set the form up – despite me having cleared all browser cache/history – why might this be? https://www.j-flex.com/wp-content/uploads/2022/12/in-other-browsers.png

Thank you!

Hi,

to remove that extra scroll bar (if you are still seeing that), please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.DTFC_LeftBodyLiner {
  padding-right: 0 !important;
}

As for the different browsers: That’s essentially because you are only logged-in into your WordPress admin in Chrome, but not in the other browsers. Therefore, you are getting cached output. Namely, your site uses the Autoptimize plugin, for which you have to clear the cache after making the CSS changes.

Regards,
Tobias

Thank you Tobias

My CSS is now as follows but the scroll bar under column 1 is still showing.

I’m also still bemused by the fact I can’t view the revised table on any computer order or device other than the one I’m logged in on. I’ve cleared Autoptimize cache numerous times but it makes no difference.

.tablepress-id-1 thead th {
	background-color: #B82601 !important;
	color: #ffffff;
	text-align: center;
	border: 1px solid #f1f1f1;
}

.tablepress-id-1 tbody td {
	min-width: 145px;
	border: 1px solid #f1f1f1;
	text-align: center;
	vertical-align: middle;
}

.tablepress-id-1 tbody td {
	background-color: #ffffff;
}

.tablepress-id-1 .column-1 {
	text-align: left !important;
	font-weight: bold;
	background-color: #6c757d;
	color: #ffffff;
}

/* eradicates horizontal scroller appearing under frozen first column */
.tablepress-id-1 .DTFC_LeftBodyLiner {
	padding-right: 0 !important;
}

Just a follow-up – have sorted the issue re display in other browsers etc. Just need to resolve and remove that small scroll button under column 1 if possible. Also, does the CSS for that need to target this specific table so that it doesn’t apply to any others I may create?

Hi,

please use that CSS code exactly as I posted it. There’s no need to prepend .tablepress-id-1 here. I will apply wherever it’s needed then.

Regards,
Tobias

I have removed it.

There must be something going on with our company network or server since I still see the smaller scrollbar in various browsers.

However, if I view on my personal laptop and use my phone as a hotspot, it works fine in all browsers.

I’d like to arrange a donation but work are very strict on anything that isn’t invoiced and donations are only usually to registered charities. If you can think of a solution, let me know – otherwise I’ll have to consider paying from my own personal funds.

Thanks

Hi,

Good to hear that it’s working now!

It might be some caching then. Make sure to clear the caches of all caching plugins (if the sites uses any), and to test in an “Incognito”/”Private browsing” tab in the browser, to rule out local browser caching.

And thanks for wanting to donate to TablePress, I really appreciate it! The best solution might then be to wait just a few more weeks, until I release TablePress 2.0 which will also have Premium versions. A license for these can then be bought normally with an invoice from the TablePress website. If you want, you can subscribe to the TablePress newsletter (in the sidebar on https://tablepress.org/ ) to be notified once that is available ??

Regards,
Tobias