Last Column Header doesn’t align with other column headers

  • Resolved Raul Flores

    (@raflo64)


    5 years, 4 months ago

    I use tables to list a multitude of information on our Public Transit site in San Antonio. Lately I noticed that on numerous tables, the header on the last column is raised higher (horizontally) than all the previous columns’ headers.

    In this example, it is a simple 4-column table with widths set in Plugin Options; and the last two columns are set to “text-align: center”

    But the mis-alignment happens on tables regardless of any text-align parameters (or none at all).

    Any insight is appreciated – Baffled in San Antonio

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

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

    (@tobiasbg)

    5 years, 4 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    The cause for this is the CSS code

    .column-1,.column-2,.column-3{
  padding-top: 18px !important;
  padding-bottom:  18px !important;
}

    in the /wp-content/themes/foundry-child/style.css file of your site.

    This sets a higher top and bottom padding for the first three columns, but the fourth column is kept at its default of 8px.
    My recommendation would be to replace this with

    .tablepress th,
.tablepress td {
  padding-top: 18px;
  padding-bottom: 18px;
}

    so that all cells in all tables are changed to those 18px top and bottom padding.

    Regards,
    Tobias

    Thread Starter Raul Flores

    (@raflo64)

    5 years, 4 months ago

    Thank you Tobias,

    I changed the CSS code in the Theme Editing and it appears something is over-riding it, as it continued to do the same thing.

    I took the suggested coding for top and bottom padding and added to the top of Plugin Options in TablePress and it appears that all tables are displaying properly.

    Not sure it that was the proper way to get the fix – but it appears to be working.

    RAFlo

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 4 months ago

    Hi,

    both ways are possible 🙂 The change in style.css is sufficient here, you were just not seeing the results due to browser caching. If you force-reload (Ctrl+Shift+R on the keyboard) to clear that cache, everything should also work.
    But indeed, putting the TablePress-related CSS code into the “Plugin Options” is indeed the recommended way.

    Good to hear that everything is working now!

    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 ‘Last Column Header doesn’t align with other column headers’ is closed to new replies.