Hi,
thanks for your post, and sorry for the trouble.
The cause for this seems to be that your theme is adding a left padding in the first column, in addition to centering being applied in your “Custom CSS”.
To fix this, please try changing
.tablepress-id-18 .column-1 {
text-align: left;
}
to
.tablepress-id-18 .column-1 {
text-align: left;
padding-left: 8px !important;
}
In addition, please also add
.dataTables_scrollBody thead th {
padding: 0 !important;
}
to fix the double header row.
Regards,
Tobias
Thanks for the quick reply. I’ve made the 2 changes you suggested but it is still not right. The venue & points columns are both centred but all of the match columns are now left aligned and the body column widths have narrowed so that Match 4 results now appear underneath the Match 3 heading.
Am I doing right in just adding the new commands at the bottom of the CSS coding?
Another thing I have noticed, the web page and table I am writing about are copies of the original page/table. This is so that I can experiment without spoiling the live page. The original is table 3 and this test version is table 18. I’ve just noticed that the new command that I entered into table 18 has appeared at the bottom of table 3. Should this happen?
Hi,
ah, I see what you mean. This is caused by the “Horizontal Scrolling” feature not being able to correctly calculate column widths for some reason, for which it uses some JavaScript code. Now, as that’s the only JavaScript feature that you seem to be using for this table, I recommend to replace that with a different implementation of horizontal scrolling (without JavaScript). For that, please uncheck the “Use DataTables” checkbox on the table’s “Edit” screen, and then install and use the scroll mode of the TablePress Extension from https://tablepress.org/extensions/responsive-tables/
And yes, adding the CSS code at the bottom of the “Custom CSS” text area is correct. Note that there’s just one global such text area and not one per table! So the commands for table 18 don’t appear at the bottom of table 3, but instead that text area gathers the commands for all tables (it’s not part of the “Edit” screen of a table, after all).
Regards,
Tobias
Hi, thanks for that, I’ll ask the higher ups about buying the extension.
Thanks for the explanation re CSS, that makes total sense now.
Cheers,
Neil
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Note that you can try and use the Extension even before donating for it 🙂
Best wishes,
Tobias
P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!
Hi Tobias, the extension has certainly done the job on text alignment, thanks. My final issue is still the width of column 1. I have used all of the codes you’ve suggested and I’ve added a column width set code found in the FAQs but the column is still wrapping on the longest name.
Neil
Hi,
great to hear that!
The width problem is caused by the table already being wider than the screen (so that scrolling is needed). The browser doesn’t like to make it even wider than. Fortunately, there’s a solution: We can instruct the browser to not add automatic word wrapping. For that, please use the CSS code
.tablepress-id-18 .column-1 {
white-space: nowrap;
}
instead of what you are using now to set the column width.
Regards,
Tobias
Perfect. Thank you so much for an excellent level of knowledge and service.
Regards,
Neil
Hi,
Sure, always happy to help! 🙂
Best wishes,
Tobias
Hi Tobias, unfortunately following major problems with our hosts servers all our good work of last week has been lost. I have tried to recreate everything from our previous posts but I have clearly missed something. I have reinstalled the responsive tables extension and as far as I can tell added all of the changes to the CSS but my text is not aligning as it should.
Hi,
Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks! The link in your original post above is not working anymore, for me.
Regards,
Tobias
Hi,
thanks for the new link! So, just to be sure, you want the cells to be centered, except for the first column, correct? If so, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
.tablepress-id-18 tbody td {
text-align: center;
}
Regards,
Tobias
Thank you, that’s got it. I’ll play safe this time and copy & paste the CSS into a text document, just in case.
Neil
Hi,
yes, that’s a great idea for this to be backed up!
Best wishes,
Tobias
