Setting column widths for your tables is possible with a short piece CSS code that just needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
.tablepress-id-7 .column-2 {
width: 100px;
}
Code language: CSS (css)
This example would set the column width of the second column of the table with ID 7 to 100 pixels. Adjust these numbers as needed.
This is the general pattern that I recommend. You can use this as often as needed, changing the column in question to the correct number each time. If you want to set multiple columns to the same width, follow the pattern
.tablepress-id-7 .column-2,
.tablepress-id-7 .column-4,
.tablepress-id-7 .column-8 {
width: 150px;
}
Code language: CSS (css)
Note: In most cases, it is not necessary to set the column widths directly! Instead, you might want to reduce the padding (the white space between the text in a cell and the edges of a cell), with the CSS code
.tablepress-id-7 {
--padding: 4px;
}
Code language: CSS (css)
which again needs to be adjusted as above.
To apply such a change to all tables on your site, use .tablepress
as the first part of the selector, instead of .tablepress-id-7
.
Please keep in mind that it will not always be possible to reduce the width of a table column, as by default the longest single word or other content in a column defines that column’s minimum width. You might therefore have to employ a solution to make your table “responsive”, e.g. by using the Responsive Tables feature module that is available in TablePress Premium plans, especially on smaller screens, like phones and tables.
When trying to increase the width of a column, you will need slightly extended CSS code, if that table already uses a width that is bigger than the available content area and therefore uses horizontal scrolling:
.tablepress-id-7 .column-2,
.tablepress-id-7 .column-4,
.tablepress-id-7 .column-8 {
width: 250px;
min-width: 250px;
}
Code language: CSS (css)
By defining the minimum width as well, the browser will make the column wider even though the table already uses horizontal scrolling.