Support » Plugin: TablePress » Table header text and spacing/wrapping

  • Resolved cirks

    (@cirks)


    I’m confused and struggling to get a header of tables working correctly. I would like the header text (which is in first cell) to either span some or all columns via css and also control the width of the first column. Whatever I seem to try doesn’t work!
    The other issue is that the header text in the first cell, despite not having any white spacing etc seems to use excessive space even when “auto width” of the column.

    So, at present, if you look at the linked page, the first table “Colts Cup” has extra space to make the column wider – this space doesn’t exist in the underlying data. The issue is the same for all the other headings of tables. If I make the column narrower, the text wraps well before I would expect it to.

    The most relevant bit of css is below so if you can advise how to stop the extra space AND how to get the text to span all columns successfully that would be really appreciated

    /* header – white background with green text */
    .tbl-hertscomp thead th,
    .tbl-st-1 tfoot th {
    background-color: #ffffff !important;
    color: #005e30 !important;
    word-wrap: none !important;
    }

    /*first cell in header- green background with white text */
    .tbl-hertscomp th:first-child {
    border: solid 1px;
    background-color: #005e30 !important;
    color: #ffffff !important;
    }

    /*first cell in data (comp round) – bold and right border */
    .tbl-hertscomp td:first-child {
    border-right-style: solid !important;
    border-right-width: 1px !important;
    border-right-color: #005e30 !important;
    font-style: bold !important;
    }`

    The page I need help with: [log in to see the link]

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

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    To make layouting easier, can you please turn off the “Use DataTables” checkbox for these tables? This will turn off some automatic width calculation that might be interfering here.

    Then, to span columns, just CSS is not enough. You will need to merge/combine cells via the #colspan# keyword, see the corresponding buttons below the table input fields.

    Regards,
    Tobias

    Thread Starter cirks

    (@cirks)

    Hi Tobias
    Thanks for the reply. The “Use Data Tables” checkbox is disabled already for all these tables.

    The tables will get imported (due to updates from an Excel source) so the #colspan# will need to be reapplied each time won’t it? Anyway, that’s not a huge issue.

    The more important bit is whether the weird width setting can be resolved (ie all the extra space after the text in the first header cell) and why it’s wrapping so ‘early’ (ie even when width should be enough for the text in the cell)

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks, yes the checkbox is turned off now.

    About the #colspan#: Yes, this will have to be re-added after an import from Excel (unless you maybe add it as text there already). I’m working on changing this for the upcoming TablePress 2.0, where combined cells can be detected and converted automatically.

    As for the width: Have you now tried setting a column width like

    .tablepress-id-ColtsCup22 .column-1 {
      width: 80px;
    }

    The current widths seem to be the automatic defaults that the browser calculates. And it will normally not choose the most narrow widths, but something “nicely readable”.

    Regards,
    Tobias

    Thread Starter cirks

    (@cirks)

    Hi Tobias
    Thanks so much for the prompt replies and the information too.
    The checkbox unfortunately my mistake had originally been left on only on the first table (ColtsCup) which is probably the one you looked at but it was off for the others.

    Anyway, your columnn width help is perfect and works exactly how I want – so thank you for that.

    There will be some columns which I’ll want the same across all tables so I’ve now tested
    .tbl-hertscomp .column-1 {
    width: 80px;
    }
    which works well too (I’ll change the width suitably!)

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.