table formatting- column width and filter header error

Hi,

thanks for your post, and sorry for the trouble.

The width issue seems to be related to a small typo: There needs to be a space between .tablepress and .column-2. Can you please try adding that?

Now, the wrong alignment when filtering or sorting might be coming from the “Horizontal scrolling” feature that does not always work on all sites unfortunately, due to CSS code in the theme. So, if you don’t really need it, I recommend to turn “Horizontal Scrolling” off.
To find out more details about the issue, please also post a link to the page with the table that is not working. Thanks.

Regards,
Tobias

thank you for your quick reply. Horizontal scrolling is needed to see the entire table on a standard resolution. I will try and edit the font size to see if that might help.

Unfortunately, the tables did not adjust once I fixed the typo. I tried inserting the space so that the text reads as below:

.tablepress .column-2 {
width: 400px;
}

I slso tried using the letter “b” instead of 2 in case that might fix it, but no luck.

Does this have anything to do with the fact that I imported these as CSV files? Are there additional options in the advanced editor for how to fix this? I’m not an expert coder, but I AM an expert internet researcher, so if the code is out there, I can hunt for it. ??

Thanks for any help you can provide.

here is the link to the table not working correctly. These issues occur for all tables since they are similarly formatted.

https://biz130.inmotionhosting.com/~texasa13/?page_id=206

Hi,

thanks for testing this, and also for the link! That helped me discover a small CSS problem, by your theme, that forces us to use more CSS:

.tablepress .column-1{
  width:auto;
}

.tablepress-id-23 {
  table-layout: fixed;
}
.tablepress-id-23 .column-2 {
  width:400px !important;
}

Note that I have added the table ID to the second block of CSS in two places. I recommend to use that method to remain flexible in case you ever have a table that shall not follow this pattern of 400px width in the second column and the horizontal scrolling.

Using letters instead of numbers in the CSS code will not work. Also, the origin of the data (e.g. from an import) does not influence this.

Regards,
Tobias

issue resolved- I continued to copy code and adjust column px width and column number until the entire table was formatted. I will repeat for each table ID with a find/replace in another program and then copy into plug-in options.

Thanks so much for your prompt attention and for a wonderful plug-in. You have made my life easy today. ??

Marcia

Hi Marcia,

great to hear that this helped! Now we should optimize your CSS code some more. You have copied a little bit too much ??

/* CSS for all tables. Don't touch! */

.tablepress .column-1 {
	width: auto;
}

/* CSS for table 23 */

.tablepress-id-23 {
	table-layout: fixed;
}
.tablepress-id-23 .column-1 {
	width: 100px !important;
}
.tablepress-id-23 .column-2 {
	width: 350px !important;
}
.tablepress-id-23 .column-3 {
	width: 100px !important;
}
.tablepress-id-23 .column-4 {
	width: 50px !important;
}
.tablepress-id-23 .column-5 {
	width: 75px !important;
}
.tablepress-id-23 .column-6 {
	width: 150px !important;
}
.tablepress-id-23 .column-7
.tablepress-id-23 .column-8,
.tablepress-id-23 .column-9,
.tablepress-id-23 .column-10,
.tablepress-id-23 .column-11,
.tablepress-id-23 .column-12,
.tablepress-id-23 .column-13,
.tablepress-id-23 .column-14 {
	width: 90px !important;
}

/* CSS for table 4 */

.tablepress-id-4 {
	table-layout: fixed;
}
.tablepress-id-4 .column-1 {
	width: 100px !important;
}
.tablepress-id-4 .column-2 {
	width: 350px !important;
}
.tablepress-id-4 .column-3 {
	width: 100px !important;
}
.tablepress-id-4 .column-4 {
	width: 50px !important;
}
.tablepress-id-4 .column-5 {
	width: 75px !important;
}
.tablepress-id-4 .column-6 {
	width: 150px !important;
}
.tablepress-id-4 .column-7,
.tablepress-id-4 .column-8,
.tablepress-id-4 .column-9,
.tablepress-id-4 .column-10,
.tablepress-id-4 .column-11,
.tablepress-id-4 .column-12,
.tablepress-id-4 .column-13,
.tablepress-id-4 .column-14 {
	width: 90px !important;
}

You don’t have to copy blocks that are already there with the exact same code, but only those parts that change. Also, you can combine some selectors. Also, the very first part should stay unmodified.
I have now grouped your CSS a little bit and added comments to make it easier to distinguish them.

Regards,
Tobias

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

thanks so much- I’ll use this instead of my other plan to find/replace table numbers and paste. Count on a high rating from me with excellent customer service like this! ??

Hi,

no problem, you are very welcome! ??
Always happy, when I can help!
And thanks for wanting to rate the plugin, I really appreciate it!

Best wishes,
Tobias