Support » Plugin: TablePress - Tables in WordPress made easy » Unable to control column widths

  • Resolved jptoews

    (@jptoews)


    I’ve tried using CSS:

    TablePress > Plugin Options > Custom CSS:

    .tablepress-id-1 .column-11 {
    width: 300px;
    }

    …and shortcode:

    [table id=1 column_widths=”36px|23px|69px|74px|54px|109px|74px|55px|37px|69px|300px|71px|62px|79px|94px” /]

    …but neither one has any impact on the column widths. I am particularly trying to expand the width of a column that has a lot of text. You can see the table here:

    http://dev.studiotwo.com/jttest/sample-page/

    I’m also not able to control the row height. I’m assuming both of my problems are related to the fact that I’ve got a table with too many columns (requiring horizontal scrolling) and cells containing too much text. But how do I fix it?

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, the reason for this is that you have too much content in the table, which just can’t fit on the page. You will either have to remove columns or need to use the horizontal scrolling.

    And, due to the horizontal scrolling, the idea of setting column widths in the Shortcode can not be used, but the method with the “Custom CSS” should work. Please try again with

    .tablepress-id-1 .column-11 {
      width: 300px !important;
    }

    That should make the eleventh column wider, which will also have an effect on the row heights.
    Changing the row heights separately from that is not possible, as you’d have the same problem as with the width: The content of the cell has to go somewhere, so that the amount of content defines the minimum height.

    Regards,
    Tobias

    Thread Starter jptoews

    (@jptoews)

    Sadly, that does not work; the column width does not increase to 300px, and the header/column alignment is also thrown off…

    http://dev.studiotwo.com/jttest/sample-page/

    There is an overall width (1410px) and individual column widths being written into the code, which my css styles can’t seem to override.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for testing. That’s indeed unfortunate 🙁 My assumption is that the horizontal scrolling feature (which comes from an external JavaScript library) needs a different way of initialization.
    Please try changing the table’s Shortcode to

    [table id=1 datatables_scrollx="2000px" /]

    That should make the entire table wider, so that the column width is hopefully applied.

    Regards,
    Tobias

    Thread Starter jptoews

    (@jptoews)

    Bummer. That did not change the behavior. CSS-defined width is still ignored, and the header/column alignment still gets messed up.

    For the moment, I’ve returned to the basic shortcode with no parameters, and disabled the custom CSS. But if you have any other ideas, I’d love to hear them.

    Sincere thanks for all the time you’ve spent trying to resolve my problem.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    bummer, indeed.

    Ok, I have one more idea 🙂 If fixing the width with CSS does not work, we’ll try fixing it with a wrapping container around a container. To do that, please
    1. Remove the Shortcode parameter that I suggested above.
    2. Change the “Custom CSS” to

    .tablepress-id-1 tbody .column-11 div {
      width:300px!important
    }

    3. and wrap the entire content of the “A babe died at…” cell in the first row with a HTML <div> tag, i.e.

    <div>A babe died at ... Fleming #2.]</div>

    That should fix the minimum width of the cell content of the eleventh column, which should fix the width correctly for the entire column.

    Regards,
    Tobias

    Thread Starter jptoews

    (@jptoews)

    SO CLOSE! That works… but only on the first page of results. As soon as you view the next page, that first cell is no longer visible, and the columns revert back to their default widths.

    I suppose I could use a script or something to put div tags around every value in the columns I want to resize…

    Or perhaps “freeze” one row at the top?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    ah, yes :-/ As the <div> is only in the first row, it will only do the change on the first page.
    I don’t know if freezing a row at the top is possible, so simply wrapping all cells of column 11 in a <div> tag should indeed be the best way to go.

    Regards,
    Tobias

    Thread Starter jptoews

    (@jptoews)

    I re-wrote the VB script that I was using to clean/export from Excel, adding div tags around the contents of each cell. Re-imported into TablePress, set the column widths in the TablePress Custom CSS as you suggested:

    .tablepress-id-2 tbody .column-11 div {
    width:300px!important
    }

    et voila! I can now control the column widths.

    Thanks for the suggestions and assistance.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    awesome! That’s great news! Good to hear that this could be done by simply extending your script! 🙂

    Best wishes,
    Tobias

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Unable to control column widths’ is closed to new replies.