fetruck

Duh, this is embarrassing. The comment box shows up automatically if viewing a single post versus viewing the blog main page. Guess which one I was looking at? Nothing to see here, move along!

Done! You rock Tobias! If I was writing a BuzzFeed headline about your plug-in, it would go something like “The one WordPress Plug-in that Restores your Faith in Humanity!” Rated five stars and some additional appreciation already sent your way!

Well, setting specific column width with px works within the visible envelope but scroll doesn’t work anymore. It is as if container now becomes just the visible area. Is the 100% width NOT overridden by DataTables? Latest table result here.

Tobias’s catch of my stray comma was great and opened up the problem to what really needs to be done.

The word-break CSS works but no matter what, I can’t get width to work no matter my settings (px, %). The result is a narrow column about four characters wide no matter what the width setting

I have been commenting out and adding back in combinations of the following CSS on this table;

/*.tablepress-id-71 .column-8,*/
.tablepress-id-71 .column-9,
.tablepress-id-71 .column-11 {
	width: 150px;
	word-break: break-word;
	/*overflow-wrap: break-word;*/
	/*word-wrap: break-word;*/
}

A picture of column 8 without word-break versus column 9 with word-break can be seen here.

By the way, the inspect element computed box in Chrome for a text cell versus the URL cells looks like this. Text cells have specific widths (set automatically by TablePress?) versus the URL cells which are set to automatic ‘auto x auto’ no matter whether word-break is applied to them or not.

For my benefit, and hopefully others, some thinking out loud here; CSS styles can be set by WordPress, WordPress theme stylesheet, and TablePress – did I miss any? There is something cascading downward that probably has a higher priority over width that is preventing the CSS width set in TablePress from working.

In addition, word-break is taking its cues from…well, not sure what. Container size? Wrapper? ??? How does it choose where to break? Is there TablePress / DataTables box size coding that I should bang my head against?

Tobias et. al.,

Been monkeying around with just this table to isolate any experiments. I have tried many pxs and %s and nothing seems to have any effect.

My headers are still not lining up and my URLs are still not breaking. Code applying to the table:

.tablepress-id-71 thead th,
.tablepress-id-71 tbody td, {
	text-align: center;
}

}
.tablepress-id-71 .column-8,
.tablepress-id-71 .column-9,
.tablepress-id-71 .column-11, {
	width: 300px !important;
	word-break: break-word !important;
	overflow-wrap: break-word !important;
	word-wrap: break-word !important;
	display: inline-block !important;
}

Just for thoroughness, perhaps the way I imported might have something to do with this. I did not use CSV because I have commas within my content. I don’t know JSON. And when I tried the .xls versions they did something to the accents for other languages (I forgot exactly what at the moment). So htm/html was what I chose; .htm created in Google Sheets and exported to a .zip group of .htms. When imported using Tablepress, the carefully chosen column widths for my many columns were gone. And my URLs refuse to break no matter how !important; I make the breaks.

Currently only TablePress, TablePress Extension: DataTables FixedColumns, and TablePress Extension: Responsive Tables are activated.

Any thoughts would be welcome.

Desperation is the mother of invention.

Mad reconfiguration of my search terms and the auto-correcting / auto-stemming Google machine found me this: footer is not going to the bootom of screen

I didn’t close the table with </table>

When page elements aren’t in the right place, check your CSS and HTML symmetry using ‘Inspect Element’ in Google Chrome or your respective developer tool. And WordPress’s CSS troubleshooting is a good guide to thinking not just about CSS but about isolating problems.