rubberneil

Thanks – I could not see any plugins that needed updating if can share any info regarding which one that might be?
Have used the jQuery Updater plugin to update this but not seeing any effect yet.

Regards
Neil

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

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?

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;
}

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 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

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.

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;
}

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.

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

To be honest I got so frustrated waiting for a response from the developers that I switched to another plug-in altogether.

Featured Content Pro

Do you have a paid Font Awesome account? – if so, might be worth exploring the ‘Kit’ route.

Can’t view your website:

The connection for this site is not secure
https://www.paulhughes.pro uses an unsupported protocol.
ERR_SSL_VERSION_OR_CIPHER_MISMATCH

Do you use FontAwesome icons?

Thanks

I tried checking the box for ‘Aggregate JS-files’ and both with and without that additional one being added to the exclusion list. In both instances this is what the page looks like: Screenshot As you can see a large blank section display and then the sections underneath are also missing their graphics.

I haven’t installed the plug-in as yet.

I informed WP Online Support Team with your information from the top of this post and they replied as follows….

“I have checked this plugin which is a temporary solution that does not work for all websites. You can try and see if if it resolves, but speak to the “Autoptimize” team once because it’s not a permanent solution to resolve this issue. Please check and let me know its working or not.”

I’m not entirely sure what that means and am reluctant to have to install yet another plug-in on the site since there are enough already, so for now have just left ‘Aggregate JS-files?’ unchecked. ??