• Resolved kwsapphire

    (@kwsapphire)


    I’m using the latest versions of WordPress and TablePress. I have the following code in the “Plugin Options” section:

    .entry-content .tablepress {
    	width: auto !important;
    	margin: 0 auto 1em !important;
    }
    
    .tablepress,
    .tablepress tr,
    .tablepress tbody td,
    .tablepress thead th,
    .tablepress tfoot th {
    	border: none !important;
    }
    
    .tablepress tbody td {
    	font-family: "Short Stack", Courier New, Monospace;
    	color: #fff;
    }

    Most of my tables look fine with this. Everything is evenly spaced, no problems. But that’s because most of my tables each have images that are all the same size, so it’s really the images that determine the width of columns and height of rows.

    I have two tables that have text (or images and text). Because the amount of text affects column width, I want to specify the column width for each of these tables. Table 2 has images and text in two columns (several rows), and Table 17 has text only in three columns (one row). In Table 2, it’s Column 1 that gets shrunk down to less than half. And in Table 17, the 2nd column is larger than the other two. So I use the following code:

    .tablepress-id-2 .column-1 {
    	width: 50%;
    }
    
    .tablepress-id-17 .column-1,
    .column-3 {
    	width: 33%;
    }

    And the above code does indeed fix Tables 2 and 17. But then, Tables 3 and 12 go wonky. Table 3 has four same-sized images (1 row, 4 columns), and Table 12 has five same-sized images (1 row, 5 columns). When I insert the above code, Column 1 in both Tables 3 and 12 is suddenly smaller than the other four columns, so the spacing is all weird. It doesn’t seem to affect any of my other tables in this way, although it does slightly adjust the padding for all cells in all tables. (It just doesn’t disproportionately affect a single column in each table.)

    It’s also worth noting that I can’t get Table 2 to be centered on the page with ANY amount of CSS code. The only way I can make it centered, is to insert line-breaks into my text so that the total width doesn’t push the boundaries of the cell.

    I’ve fiddled with the contents of Tables 2 and 17 so that they’re essentially useable for my needs, without adding code to specifically resize their columns. (So the only custom code is the first block that I posted above, that adjusts all of my TablePress tables.)

    But I don’t understand why adjusting the width of specific tables would affect other tables. This makes no sense to me whatsoever.

    Table 2 is on this page: https://coloden.com/about/sapphire/
    In the section that says “These are the different forms Sapphire can take.”

    Table 17 is on this page: https://coloden.com/galleries/polish/
    It’s the Brand/Color/Texture lists.

    In both cases I added extra columns (and rows in the former case) to insert divider images, to help separate the contents.

    Table 3 is on this page: https://coloden.com/about/
    It’s the only contents on the page, so pretty easy.

    Table 12 is on this page: https://coloden.com/home/links/
    It’s the Podcasts section.

    I’ve gotten things to work for my needs for now, but it’s a bit frustrating that I have to work around the problem in this way. Why does specifying the column width for a specific table affect other tables at all?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    This problem is likely caused by a small mistake in your code block

    .tablepress-id-17 .column-1,
    .column-3 {
    	width: 33%;
    }

    This is actually setting a width for all third columns in all tables on the site! The comma as a separator in CSS selectors works on the “full thing” not just parts. So, please try changing this block to

    .tablepress-id-17 .column-1,
    .tablepress-id-17 .column-3 {
    	width: 33%;
    }

    and the side effects should disappear.

    Regards,
    Tobias

    Thread Starter kwsapphire

    (@kwsapphire)

    Ahh, thank you very much!

    Plugin Author Tobias B?thge

    (@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 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS for one table affects other tables’ is closed to new replies.