Table column widths – prevent text wrapping

  • Resolved nfischer83

    (@nfischer83)


    12 years, 9 months ago

    AMAZING plugin. Exactly what I was looking for.

    Having an issue customizing it.

    I have a table with a lot of columns. I had to turn on the horizontal scrolling to make it look nicer. But it’s still really squishing my text horizontally. I was able to add non-breakable spaces to prevent some of the squishing, but some of my longer words are splitting and wrapping between lines. I was wondering how I can control the text wrapping or if I can just turn this off completely. I tried using a generic
    {
    white-space: nowrap;
    }
    CSS into the plugin custom css area and it didn’t work.

    Any suggestions?

    Here is a link to the testing table that I created to try out your plugin:
    http://test.puzzlecreatives.com/about/
    Here you can see that my column headers are longer entries which is causing problems with how it looks.

    Advise?
    Thanks for your help!

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

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

    (@tobiasbg)

    12 years, 9 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    So, have you tried

    .tablepress-id-1 thead th {
  white-space: nowrap;
}

    With that, you should not need the manual non-wrapping spaces.

    If that also does not help, you’ll have to manually set the widths of the columns, as explained in the TablePress FAQ at http://tablepress.org/faq/

    Regards,
    Tobias

    Thread Starter nfischer83

    (@nfischer83)

    12 years, 9 months ago

    This worked perfect. Thanks for the advice!

    Now I am wondering, is there a way this can be applied to the entire table as well? This code applied directly to the table headers which is exactly what I was looking for, but it did not apply this to each column. Any advice to apply this to every cell? Or row? Or column?

    Thanks again!

    Thread Starter nfischer83

    (@nfischer83)

    12 years, 9 months ago

    I seemed to have noticed that I could just apply this to each column individually by using
    .tablepress-id-1 .column-1 {
    white-space: nowrap;
    }
    and then just do that for every column.

    So I think I’ve got it! Unless you have a more efficient idea?
    Thanks again!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    12 years, 9 months ago

    Hi,

    to also have it apply to table cells, you could simply extend the code to

    .tablepress-id-1 thead th,
.tablepress-id-1 tbody td {
  white-space: nowrap;
}

    That’s much shorter than having to copy/paste the code for each column 🙂

    regards,
    Tobias

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

The topic ‘Table column widths – prevent text wrapping’ is closed to new replies.