Table column width

  • Resolved jammastrj

    (@jammastrj)


    11 years, 7 months ago

    Tobias,

    I’m loving TablePress and will be making a donation soon (as soon as I get away from inputting all these tables!).

    Can you take a look at this page:
    http://lusofederal.com.c1.previewmysite.com/certificate-rates/

    In the second and third tables, I have the column-1 and column-2 width set to:
    white-space: nowrap;

    I’m just trying to get the these table’s columns to line up so they are uniform. There will be 7 tables back-to-back on this page and I’d like each of the three columns to be a uniform width between them all so as to make them all look like they are in the same table.

    Does that make sense?

    Thanks!
    Jamie

    https://wordpress.org/plugins/tablepress/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 years, 7 months ago

    Hi Jamie,

    thanks for your post, and sorry for the trouble.

    Setting white-space: nowrap; won’t really help with the widths here, it will only prevent the browser from adding automatic word-wrapping. Instead, you will need to set the column widths with CSS, see http://tablepress.org/faq/column-widths/

    You’ll probably end with something like this

    .tablepress-id-40 .column-1,
.tablepress-id-41 .column-1,
.tablepress-id-44 .column-1,
.tablepress-id-45 .column-1,
.tablepress-id-46 .column-1,
.tablepress-id-47 .column-1 {
  width: 30%;
}
.tablepress-id-40 .column-2,
.tablepress-id-41 .column-2,
.tablepress-id-44 .column-2,
.tablepress-id-45 .column-2,
.tablepress-id-46 .column-2,
.tablepress-id-47 .column-2 {
  width: 30%;
}
.tablepress-id-40 .column-3,
.tablepress-id-41 .column-3,
.tablepress-id-44 .column-3,
.tablepress-id-45 .column-3,
.tablepress-id-46 .column-3,
.tablepress-id-47 .column-3 {
  width: 40%;
}

    Regards,
    Tobias

    Thread Starter jammastrj

    (@jammastrj)

    11 years, 7 months ago

    Tobias,

    Thanks for the help – something still not right though… take a peek:
    http://lusofederal.com.c1.previewmysite.com/certificate-rates/

    Thoughts?

    Thanks,
    Jamie

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 years, 7 months ago

    Hi Jamie,

    the reason for this likely is the “Horizontal Scrolling”. That sometimes prevents the browser from applying the widths. Can you please check again after turning those checkboxes off for the tables on the page? (For tables where all individual DataTables features are turned off, you should then also uncheck the “Use DataTables” checkbox.)

    Regards,
    Tobias

    Thread Starter jammastrj

    (@jammastrj)

    11 years, 7 months ago

    Tobias,

    I need to keep them because of mobile devices, otherwise, when they visit the page, they will only see part of the table.

    Unless you have a suggestion?

    Thanks,
    Jamie

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 years, 7 months ago

    Hi Jamie,

    in that case, I suggest to use a different kind of Horizontal Scroling. That one does not need JS and should not mess up the widths. You’ll basically just have to add some extra wrapping HTML code around each of the tables and some “Custom CSS”.
    For details, please see https://wordpress.org/support/topic/responsive-tables-scroll-only?replies=6#post-5511954

    Regards,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Table column width’ is closed to new replies.