Alignment of table columns

  • Resolved lanijade

    (@lanijade)


    9 years, 7 months ago

    Hi there,

    We are using your plugin on this page on our site: https://shemakesmagic.com/media/

    I have just added a new table under ‘Featured articles’ titled ‘interviews’.

    I’m having trouble with getting the table to align correctly. Notice the table above titled ‘on plant-based eating and natural living’. The column with the arrows is narrower.

    I want both tables to look the same.

    To create the ‘interviews’ table I simply copied the ‘on plant-based eating and natural living’ table and then made changes. I have used the same css on both tables.

    Yet the alignment is still different.

    Are you able to help?

    Thanks.

    https://www.ads-software.com/plugins/tablepress/

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

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    From what I can see, you are “only” reducing the padding in that “Custom CSS”, but you are not setting any column widths. Due to that, the browser will just calculate them depending on the text in the tables.

    Can you maybe try to set the width of the first column of these two tables with the CSS approach from https://tablepress.org/faq/column-widths/ ?

    Regards,
    Tobias

    Thread Starter lanijade

    (@lanijade)

    Thanks Tobias, I’m just wondering though why we would have to do this with this table when the above table has pretty much the same kind of content in it and I’ve had not to set column widths for that one?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    the reason for this is that the browser will calculate column widths automatically, when none is set manually. For that, it takes into account the length of the text in the table cells, and it then tries to calculate the widths so that the table is “visually appealing”.
    And while the type of content in your tables might be the same, the length of the text is not. (For example, the top table has a comparably long text in the fourth row, while the bottom table does not have such a long text.)
    Does this make sense?

    Setting the widths manually is very easy. This “Custom CSS” should be sufficient here:

    .tablepress-id-9 .column-1,
.tablepress-id-13 .column-1 {
    width: 75px;
}

    Regards,
    Tobias

    Thread Starter lanijade

    (@lanijade)

    Thanks Tobias, that worked perfectly!

    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)
  • The topic ‘Alignment of table columns’ is closed to new replies.