Title: Browser alignment issues Last modified: August 28, 2022 --- # Browser alignment issues * Resolved [neildep](https://wordpress.org/support/users/neildep/) * (@neildep) * [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/) * Hi, very new to wordpress & tablepress but generally getting there. However, I’m having an issue with text alignment in TP. The text aligns exactly as I want it to in Preview but as you can see in the link, the data in the body area is right aligned instead of centered. I’ve looked online and tried various commands but with no success. * PC + Win 10 + Chrome = table data right aligned but column 1 left aligned * Ipad + Safari + table data right aligned but names are centred. * Reading a similar thread I cleared my browser’s cache but it made no difference. * Also how can I make the first column slightly wider to accommodate long names? * Neil * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fbrowser-alignment-issues%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 15 replies - 1 through 15 (of 15 total) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/#post-15957602) * 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 * Thread Starter [neildep](https://wordpress.org/support/users/neildep/) * (@neildep) * [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/#post-15959181) * 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? * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/#post-15960972) * 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/](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 * Thread Starter [neildep](https://wordpress.org/support/users/neildep/) * (@neildep) * [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/#post-15962583) * 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 * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/#post-15962713) * 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](https://wordpress.org/support/plugin/tablepress/reviews/#new-post) in the plugin directory. Thanks! * Thread Starter [neildep](https://wordpress.org/support/users/neildep/) * (@neildep) * [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/#post-15963589) * 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 * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/#post-15964604) * 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 * Thread Starter [neildep](https://wordpress.org/support/users/neildep/) * (@neildep) * [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/#post-15964716) * Perfect. Thank you so much for an excellent level of knowledge and service. * Regards, * Neil * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/#post-15964924) * Hi, * Sure, always happy to help! 🙂 * Best wishes, Tobias * Thread Starter [neildep](https://wordpress.org/support/users/neildep/) * (@neildep) * [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/#post-15979592) * 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. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/#post-15979797) * 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 * Thread Starter [neildep](https://wordpress.org/support/users/neildep/) * (@neildep) * [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/#post-15979809) * Sorry – [https://civilserviceas.org.uk/match-angler-of-the-year/](https://civilserviceas.org.uk/match-angler-of-the-year/) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/#post-15981356) * 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 * Thread Starter [neildep](https://wordpress.org/support/users/neildep/) * (@neildep) * [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/#post-15981380) * 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 * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/#post-15981525) * Hi, * yes, that’s a great idea for this to be backed up! * Best wishes, Tobias Viewing 15 replies - 1 through 15 (of 15 total) The topic ‘Browser alignment issues’ is closed to new replies. * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944) * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/) * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq) * [Support Threads](https://wordpress.org/support/plugin/tablepress/) * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/) * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/) * 15 replies * 2 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [3 years, 9 months ago](https://wordpress.org/support/topic/browser-alignment-issues/#post-15981525) * Status: resolved