I have a very similar issue and am looking for a solution as well.
Setting column width, row height and overall table size seems to be particularly difficult in TablePress; more than one post on this topic in support forum and each seems to have had a different resolution.
Here’s mine. Table too big, columns too wide. http://campchroma.com/color-notation-database/
Hi,
thanks for your question, and sorry for the trouble.
Both of you are not really suffering from drawbacks or issues in TablePress, but from how tables work in HTML in general. The width of a column will always be determined by the content in the cells. That is, one can never reduce width of a column beyond what the content requires.
tedballantine, in your case, the value of 75px is simply to small. The text in the cells requires more width than that. Now, I just checked your table, and don’t really see why you would want to change the widths at all… What exactly don’t you like regarding the widths?
funcolors, what exactly do you want to change? Changing column widths should work fine. To reduce the width of the table in general, you could tell the browser to not extend the table to the full page width with this:
.tablepress-id-1 {
width: auto !important;
}
For the row height, you would need to reduce the padding (white space between the text in the cells and the row edges), but I wouldn’t recommend that, as thing would become too squeezed.
Also, there’s a small issue in the HTML code of that page, namely the [table id=1 /] Shortcode is wrapped in HTML <pre> tags. Those can influence the design. To fix this, please go to the “Edit” screen of the page, and switch from the “Visual” to the “Text” editor. There, remove the <pre> and </pre> around the Shortcode, so that there’s only the Shortcode on its own line.
Regards,
Tobias
Thanks for the answer, Tobias.
In my case, I adjusted the width of the column for purely aesthetic purposes.
However, I just checked in Chrome and my problem does not present itself when using Chrome (that is, in Chrome the width of my columns do not change when use the sort feature).
So, perhaps my issue is also Firefox.
Hi Tobias,
With info from tedballantine’s post and yours, it’s looking better. I believe you are right that the extra tags were creating problems.
Thanks.
Hi,
funcolors, yes, your table looks much better now!
tedballantine, the issue with Firefox is that it tries to make all columns equally wide, as you set all columns to 75 pixels. Instead, I suggest to only reduce the widths of e.g. the first two columns. That would give the browser the flexibility to leave the other columns big, so that there will be less side effects. Also, your CSS can be made a little bit more efficient and shorter:
.tablepress-id-2 th,
.tablepress-id-2 td {
text-align: center;
}
.tablepress-id-2 .column-1,
.tablepress-id-2 .column-2 {
width: 100px;
}
Regards,
Tobias
