Same table, different column widths

  • Resolved coryinthelou

    (@coryinthelou)


    5 years, 5 months ago

    Hi Tobias,

    Is it possible to have different column widths within the same table that has four columns? For example:

    Row 1: 20% 25% 25% 30%
    Row 2: 45% (colspan) 25% 30%
    etc.

    Thanks in advance!

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

    (@tobiasbg)

    5 years, 5 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    This should be no problem with the approach from https://tablepress.org/faq/column-widths/ (if the content in the cells allows it):

    .tablepress-id-123 .column-1 {
  width: 20%;
}
.tablepress-id-123 .column-2 {
  width: 25%;
}
.tablepress-id-123 .column-3 {
  width: 25%;
}
.tablepress-id-123 .column-4 {
  width: 30%;
}

    Please change the 123 to the correct table ID.

    Regards,
    Tobias

    Thread Starter coryinthelou

    (@coryinthelou)

    5 years, 5 months ago

    Thanks Tobias! I realize now that I didn’t explain fully.

    While those would be the widths of row 2, row 1 would have different widths, and row 3 would also have different widths. Is this possible with TablePress?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 5 months ago

    Hi,

    the border lines of the columns will still need to be “connected”, i.e. the grid has to be used. However, that CSS code should achieve what you described above (even with the colspan).
    Please try it. If it does not work, please post a link to the page with the table where this problem happens, so that I can take a direct look. Thanks!

    Regards,
    Tobias

    Thread Starter coryinthelou

    (@coryinthelou)

    5 years, 5 months ago

    Hi Tobias,

    Thanks again, but still no luck. 🙁 I have a three-row table with each column at a different width, so I think the CSS would be something like this:

    ROW 1:

    .tablepress-id-1 .row-1 .column-1 {
    width: 15%;
    }
    .tablepress-id-1 .row-1 .column-2 {
    width: 30%;
    }
    .tablepress-id-1 .row-1 .column-3 {
    width: 30%;
    }

    ROW 2:

    .tablepress-id-1 .row-2 .column-1 {
    width: 42%;
    }
    .tablepress-id-1 .row-2 .column-3 {
    width: 35%;
    }
    etc.

    The styles above simply make the first column in each row the same width, no matter what I do. Maybe it will be easier to show an example of what I’m trying to accomplish. I’m trying to do something similar to the table on this page:

    https://georgeremus.com/the-bourbon/straight-bourbon-whiskey/

    Looking forward to your thoughts!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 5 months ago

    Hi,

    ah, I see. Sorry, that’s not possible with an HTML table, due to its fixed grid structure, just like e.g. in Excel. While you can merge cells, it’s not possible to have the cells have individual (different) widths.
    You would need other HTML structures, e.g. based on <div> containers with CSS code for this.

    Regards,
    Tobias

    Thread Starter coryinthelou

    (@coryinthelou)

    5 years, 5 months ago

    Well, darn. Thanks for letting me know.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 5 months ago

    Hi,

    sure, no problem! Sorry that I didn’t have better news here.

    Best wishes,
    Tobias

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Same table, different column widths’ is closed to new replies.