Add table cells in alphabetical order?

  • Resolved sapplewood

    (@sapplewood)


    6 years, 2 months ago

    Hello Tobias!

    You’ve been of great help in the past, but our nonprofit is growing, and I hope we’re not growing out of Tablepress!

    I have a table (Table 1) that displays all of the brands that we have certified products for, and the list keeps growing (https://www.madesafe.org/find-products/brands-we-work-with/) It is currently set up as 2 columns and 19 rows, and I’m keeping the brand logos in alphabetical order. The problem is that I can not add a new brand without having to cut and paste all the cells before (or after it, depending on the location in the alphabet…)

    I thought that if I set the table up as one VERY long row (with 38 columns), it could automatically center itself on the page if I used the same code as Table 18 on this page: https://www.madesafe.org/find-products/products/

    So I created this page: https://www.madesafe.org/draft-brands-with-certified-products/ (Table 31) and copied the css I used for Table 18, but it’s not working (it’s not being responsive and centering on the page).

    Here is the code I added:

    }

    .tablepress-id-31,
    .tablepress-id-31 tr,
    .tablepress-id-31 tbody td,
    .tablepress-id-31 thead th,
    .tablepress-id-31 tfoot th {
    border: none;
    }

    .tablepress-id-31 {
    width: auto;
    margin: 0 auto 1em;
    }

    .tablepress-id-31 tbody td {
    text-align: center;
    display: inline-block;
    }

    Is there a simple fix, or do you have another workaround for my original Table 1 so I can easily insert new table cells in alphabetical order?

    Thank you!

    ===

    DEBUG & VERSION INFO

    · Website: https://www.madesafe.org
    · TablePress: 1.9.1
    · TablePress (DB): 37
    · TablePress table scheme: 3
    · Plugin installed: 2015/12/14 23:23:05
    · WordPress: 4.9.9
    · Multisite: no
    · PHP: 7.2.12-1+ubuntu18.04.1+deb.sury.org+1
    · mysqli Extension: true
    · mySQL (Server): 5.7.24-27-log
    · mySQL (Client): mysqlnd 5.0.12-dev – 20150407 – $Id: 38fea24f2847fa7519001be390c98ae0acafe387 $
    · ZIP support: yes
    · UTF-8 conversion: yes
    · WP Memory Limit: 40M
    · Server Memory Limit: 512M
    · Magic Quotes: off
    · WP_DEBUG: false
    · WP_POST_REVISIONS: 3

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

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

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    The approach of doing this as a table with just one row and then styling it with CSS should indeed be the best here. It seems like there’s a little bit more CSS in table 18 (but applied via the .page-id-4551 selector for some reason). So, please also add

    .tablepress-id-31 tbody {
  text-align: center;
}

    To work around a sizing issue with the images, I also recommend

    .tablepress-id-31 img {
  width: 225px;
}

    Regards,
    Tobias

    Thread Starter sapplewood

    (@sapplewood)

    Hmmmm… still not working (https://www.madesafe.org/draft-brands-with-certified-products/).

    Here is the code I’m using:

    }

    .tablepress-id-31,
    .tablepress-id-31 tr,
    .tablepress-id-31 tbody td,
    .tablepress-id-31 thead th,
    .tablepress-id-31 tfoot th {
    border: none;
    }

    .tablepress-id-31 {
    width: auto;
    margin: 0 auto 1em;
    }

    .tablepress-id-31 tbody td {
    text-align: center;
    display: inline-block;
    }

    .tablepress-id-31 tbody {
    text-align: center;
    }

    .tablepress-id-31 img {
    width: 225px;
    }

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    that table on the page is actually working fine for me. Please force-reload the page in your browser (or view it in a “Private” browsing session to turn off caches), as I assume that you are seeing a cached version.

    Regards,
    Tobias

    Thread Starter sapplewood

    (@sapplewood)

    Thank you Tobias – I viewed the page “incognito” and it worked! However, the columns seem “pushed together” now into the center of the page, and it won’t allow more than 2 columns in the open space. Is there a way to allow 3 columns max across if viewed on a large screen?

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    for that, just reduce the size of the images in the CSS code

    .tablepress-id-31 img {
  width: 225px;
}

    as desired, e.g. to 200px for three images per row.

    Regards,
    Tobias

    Thread Starter sapplewood

    (@sapplewood)

    Thank you Tobias – worked beautifully! Time for my annual donation ;>)

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!
    And thanks for supporting TablePress, that’s really very nice of you!

    Best wishes,
    Tobias

    Thread Starter sapplewood

    (@sapplewood)

    Almost there!
    Still one small issue:

    On mobile, Row 1 Column 2 isn’t centering beneath Column 1; the text and image are centered, but the column is aligning left.

    Is there a fix? Code I’m currently using:

    .tablepress-id-32,
    .tablepress-id-32 tr,
    .tablepress-id-32 tbody td,
    .tablepress-id-32 thead th,
    .tablepress-id-32 tfoot th {
    border: none;
    }

    .tablepress-id-32 {
    width: auto;
    margin: 0 auto 1em;
    }

    .tablepress-id-32 tbody td {
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    }

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi Susan,

    where can I see this table 32?

    Regards,
    Tobias

    Thread Starter sapplewood

    (@sapplewood)

    https://www.madesafe.org/thank-you-funders/

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks! The best way here should be to add a width command like

    width: 300px;

    to the block that starts with

    .tablepress-id-32 tbody td {

    Regarding the problem with the wrong layout for returning visitors: This is caused by having turned off so-called cache busting versioning parameters. For example, WordPress normally loads a file from a URL like

    https://www.madesafe.org/wp-content/tablepress-combined.min.css?ver=23

    However, on your site, most likely a plugin has turned off this versioning, i.e. removes the ?ver=23 parameter. Due to this the cache is not properly cleared. I would recommend to turn this cache busting on again.

    Regards,
    Tobias

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Add table cells in alphabetical order?’ is closed to new replies.