Prevent one table column from wrapping

  • Resolved rpmtl22

    (@rpmtl22)


    8 months, 2 weeks ago

    I created two “2-column” tables with 15-20 rows. The first column contains years (eg: 2024) and the second contains text.

    When I create a 2 column block on a page and put one table in each the year column (td) breaks/wraps into two lines when the column width is reduced. 2024 wraps and 1-2 digits go to a second line. I can’t find any “nowrap” option for a column in the available options.

    I tried adding nowrap inside the td HTML tags but that didn’t work.

    Is there a way to target the first column in a 2-column table and set it to not wrap?

    I found the following css in a forum post relating to using Tablepress. But I’d rather find a solution using Twenty-Twenty-Four’ s built-in table function.

    .tablepress-id-3 th,
.tablepress-id-3 td {
  width: 50%;
}

    Thanks for any help ??

    • This topic was modified 8 months, 2 weeks ago by rpmtl22.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator James Huff

    (@macmanx)

    I recommend asking at https://www.ads-software.com/support/plugin/tablepress/ so the plugin’s developers and support community can help you with this.

    Thread Starter rpmtl22

    (@rpmtl22)

    Sorry for the confusion. I’m not using Tablepress. I’m learning to use the table block in WP 6.4.3 (only started using/learning WP three months ago) and should not have referenced that Tablepress code. It’s a suggested solution found elsewhere that might have hinted to what’s needed to solve the problem (ie: do/can WP table columns each have a class that can be styled with CSS?)

    I’m trying to understand how I might target the 1st (or any) column on a WP table with custom CSS to prevent it from wrapping a number when the screen size is reduced. Or can I create a class for the number that will prevent it from wrapping?

    I also find the white-space: nowrap; property referenced as a way of preventing wrapping. But it’s a number that’s breaking into a vertical stack and there is no white-space …

    • This reply was modified 8 months, 2 weeks ago by rpmtl22.
    Thread Starter rpmtl22

    (@rpmtl22)

    I found a kludge that works (something I did in pre-CSS days) I put a 140px white gif (could have been transparent) into one of the blank cells in the year column. That forces a min column width that prevents year numbers from breaking onto multiple lines.

    Learning how to target the year, the cell, or a column using custom CSS would have been more elegant (and I would have learned something new) … but this works ??

    • This reply was modified 8 months, 2 weeks ago by rpmtl22.
    Moderator bcworkz

    (@bcworkz)

    something I did in pre-CSS days

    Your age is showing ?? (I should talk, I’m from pre-internet days)

    In case you still want to learn something when you have some time, what we’d normally do is add a class attribute to the cells we want to target with white-space: nowrap;. You can do this through the code editor view, but Gutenberg editor will not be happy. It’ll complain about invalid content even though it’s HTML5 compliant. It’ll want to “attempt recovery”. All will be fine if you ignore the request. If you let it attempt recovery, it’ll mess everything up. Probably a worse kludge than invisible GIFs.

    You cannot really target columns with CSS because the HTML is structured by row. But you could target the first cell of all rows with something like:

    figure.wp-block-table tr td:first-child {
    white-space: nowrap;
}

    To target other cells in each row, use :nth-child() or :last-child pseudo selectors.

    N.B: this CSS will affect all table blocks in your site. To target a particular page or table, look for distinguishing attributes in ancestor elements. The body tag attributes are good for targeting a specific page. Theme dependent, but there is often a class like .postid-1234 we could use.

    Thread Starter rpmtl22

    (@rpmtl22)

    Hi again bcworkz. First I used GEnie, then Compuserve with a 2400 baud modem. Then along came Mosaic Netscape (with a bit of Archie, Veronica and Jughead in between) and started creating small websites (as a sideline) using Macromedia Dreamweaver I guess that really dates me. Perhaps you too <g>

    I used pseudo selectors for tables with a site I made in 2002. But like so/too many things, you “either use it or lose it”. I think it’s time for a review.

    I’ll try what you recommended to see how it works. But if it needs to be applied on a row-by-row basis then I might just stick with the GIF spacer, if it ain’t broke …

    Thanks again for your generous help ??

    Moderator bcworkz

    (@bcworkz)

    Happy to help educate, or re-educate as the case may be. Nothing much wrong with GIFs if they do the job. They do require an extra HTTP request though. I think inline SVG should have the same effect. It’s moot since CSS will work.

    if it needs to be applied on a row-by-row basis

    FWIW nth-child() can still do the job here. Selector for 3rd row, second cell: figure.wp-block-table tr:nth-child(3) td:nth-child(2)

    Or do an specific element style attribute: <td style="white-space: nowrap;">
    This makes Gutenberg unhappy though. You’d have to do the table as custom HTML and not use the table block.

    “either use it or lose it”

    Don’t I know it. I used to be fairly good at JavaScript. I then learned PHP and stopped using JS for the most part. Now it’s almost like I never learned it to begin with.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Prevent one table column from wrapping’ is closed to new replies.