WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Last Column being truncated on some browsers (6 posts)

  1. Xenaco
    Member
    Posted 11 months ago #

    We have implemented a TablePress table on a client website and it displays correctly on some computers and browsers with all columns being displayed, however, there are numerous computers and browsers being reported by the client which are not displaying the full table width. The last column is truncated. There does not seem to be any identifiable reason for the inconsistent display.

    Site table is http://artpridenj.com/2013-candidates-survey

    Any ideas how to proceed to troubleshoot this?

    http://wordpress.org/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

  3. Xenaco
    Member
    Posted 11 months ago #

    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:

    http://imageshack.com/scaled/800x600/31/2yjg.png
    http://imageshack.com/scaled/800x600/197/xqfc.png
    http://imageshack.com/scaled/800x600/203/162v.png

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

  4. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

  5. Xenaco
    Member
    Posted 11 months ago #

    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.

  6. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

Reply

You must log in to post.

About this Plugin

About this Topic