Last Column being truncated on some browsers

Hi,

thanks for your question and sorry for the trouble!

This problem is a result of the amount of content in the columns. If you take a look at the header and footer row, you will see that there are several rather long words (like “Attendance” or “Participation”), which determine the minimum column width. The sum of that is then unfortunately bigger than the available content width, causing the table to be cut-off (as the theme is set to cut off content that exceeds the available width).

To change this (to some degree), you could for example reduce the padding in the cells, with this “Custom CSS”:

.tablepress-id-1 th,
.tablepress-id-1 td {
    padding: 4px;
}

Another idea would be to reduce the font size in the header and footer rows. The best solution however should be to reduce the content, either by removing/replacig those long words, or by making them word-wrappable, by adding hyphens in them.

Regards,
Tobias

This looks more like a browser problem with TablePress.

I have taken 3 separate screen shots which show the table in full on Chrome and Firefox but IE10 trucates the table.

CSS settings will not fix this problem:

https://imageshack.com/scaled/800×600/31/2yjg.png
https://imageshack.com/scaled/800×600/197/xqfc.png
https://imageshack.com/scaled/800×600/203/162v.png

https://imageshack.com/i/5n162vp
https://imageshack.com/i/5hxqfcp
https://imageshack.com/i/0v2yjgp

Hi,

no, this is not exactly a browser problem, but more a consequence of the data in the table.
In HTML tables, the longest word in each column will determine that columns minimum width. Those minimum widths will then sum up to the minimum width for the table.
The actual width is of course affected by things like the font size of the text, and the padding (white space between the text and the cell edges) in the cells. Due to the browser applying different algorithms here (for things like spacing out letters, or for applying the fonts), you get these inconsistent results.

Thus, you are right that plain CSS will not fix this, unless the CSS affects the minimum widths of the columns (e.g. by reducing that padding or the font size). However, the best way to achieve this (reduction of the minimum widths), would to be reduce the length of those long words in the column. You should therefore think about shorting/replacing/truncating/manually word-wrapping words like “Comments” or “Curriculum” as those have the biggest affect right now.
If that’s not an option, you could remove one column entirely, try the “Horizontal Scrolling” feature for tables (see the checkbox on the “Edit” screen), or adjust your theme to have a wider content area.

Regards,
Tobias

Thanks for the prompt replys and guidance.

The client had a blank column after the last full column in the table which we removed.

Then we reduced the font size as follows:

.tablepress-id-1 th,
.tablepress-id-1 td {
    font-size: 12px;
}

I started with 9px and increased the font size until the columns again broke.

This has resolved the problem. I have also used the Tipsy plugin from iThemes to display long and wide columns in a pop-up instead of stretching the column width.

Hi,

very nice! ?? Good to hear that you found a working solution!

Yeah, column widths in HTML tables are sometimes tricky, but I guess we’ll have to deal with it, until browsers offer use some better methods to influence them ??

Best wishes,
Tobias