Column width in Tablepress

Hi,

thanks for your question, and sorry for the trouble.

One reason is that the cells in the first link have a larger padding (white space between the text and the cell edges). To reduce that, add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress thead th,
.tablepress tbody td {
    padding: 4px;
}

Then, instead of using the “Horizontal Scrolling” checkbox on the table’s “Edit” screen (you should actually uncheck the “Use DataTables” checkbox, because all other features are also deactivated), please install the TablePress Extension from https://tablepress.org/extensions/responsive-tables and use its scroll mode in the Shortcode.

Regards,
Tobias

Thank you for your reply! It work, THX. I will donate you ??

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!
And thanks for wanting to support TablePress!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

My table not edit width the column ??
Code:

.tablepress-id-1 .column-2 {
width: 20% !important;
}

Hi,

Can you 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

I would like to edit multiple columns but cannot work out how to change several columns.
https://simplelifemanagement.com/index.php/2017/12/06/simple-money-management-budgets/

Hi,

thanks for your question, and sorry for the trouble.

You will just have to repeat the CSS from https://tablepress.org/faq/column-widths/ for each column. But you probably just want to make your table more narrow. For that, I instead recommend to add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

#tablepress-1_wrapper {
  width: 400px;
}

Regards,
Tobias

Hi there Tobias,
I’ve been seeing you’re doing a pretty good job in fixing these column width errors and I have one too ??

In Tablepress, I successfully updated my column width for the first table with the following code:
.tablepress-id-1 .column-1 {
width: 160px;
}

.tablepress-id-1 .column-2 {
width: 140px;
}

.tablepress-id-1 .column-3 {
width: 85px;
}

.tablepress-id-1 .column-4 {
width: 85px;
}

However, for the second table on the same page, I am unable to use the same code by changing the ID, basically whatever I do there is simply no response in the second table. I tried doing it with N, I tried all the different codes you’ve mentioned but none is having any effect. Like the second table has become unresponsive or something.

I have the plugin Wp-fastest cache but nothing is enabled in that so I dont think there is any CSS minification involved can you please help me with it.

Nevermind, you’re not supposed to see the changes by clicking on Preview but rather actually saving the whole article ?? Great Plugin, tobias!

Hi,

indeed, checking this in th preview is most likely not going to show the final result. Good to hear that everything is working!

Best wishes,
Tobias

Hey Tobias,

unfortunatly max-width tag does not work for my table… Maybe because of all extansions Ive installed…

https://www.baywidi.de/rechtsprechungsdatenbank/

I try to make the limited output in column 4 and auto (or bigger) in column 1 (Gericht). When I work with column 1 it automatically involves column-1 row-details-toggle. How can exclude it?

Thank you very much and best regards,
Maks

Hi Maks,

the problem is the white-space: nowrap; in the CSS for your column 4. That’s what makes this column so wide.

Regards,
Tobias

Hi Tobias,

I have been scouring through this thread and some others – I am having trouble changing the width of the columns in the table of the bottom of this page.

I want the columns that have vertical text to be much narrower (and I cannot believe I figured out how to make that text vertical!), while I want to be able to make other columns wider. I have tried various options in the plugin options CSS:

Option 1:

.tablepress-id-175 .column-1 td {
	width: 50px !important;
}

.tablepress-id-175 .column-2 td {
	width: 50px !important;
}

.tablepress-id-175 .column-3 td {
	width: 50px !important;
}

.tablepress-id-175 .column-4 td {
	width: 50px !important;
}

.tablepress-id-175 .column-5 td {
	width: 50px !important;
}

.tablepress-id-175 .column-6 td {
	width: 50px !important;
}

.tablepress-id-175 .column-7 td {
	width: 50px !important;
}

.tablepress-id-175 .column-8 td {
	width: 50px !important;
}

.tablepress-id-175 .column-9 td {
	width: 50px !important;
}

.tablepress-id-175 .column-10 td {
	width: 50px !important;
}

.tablepress-id-175 .column-11 td {
	width: 50px !important;
}

.tablepress-id-175 .column-12 td {
	width: 50px !important;
}

.tablepress-id-175 .column-13 td {
	width: 50px !important;
}

.tablepress-id-175 .column-14 td {
	width: 50px !important;
}

.tablepress-id-175 .column-15 td {
	width: 50px !important;
}

Option 2:

.tablepress-id-175 .column-1 td {
	width: 10% !important;
}

.tablepress-id-175 .column-2 td {
	width: 10% !important;
}

.tablepress-id-175 .column-3 td {
	width: 5% !important;
}

.tablepress-id-175 .column-4 td {
	width: 10% !important;
}

.tablepress-id-175 .column-5 td {
	width: 5% !important;
}

.tablepress-id-175 .column-6 td {
	width: 5% !important;
}

.tablepress-id-175 .column-7 td {
	width: 10% !important;
}

.tablepress-id-175 .column-8 td {
	width: 5% !important;
}

.tablepress-id-175 .column-9 td {
	width: 5% !important;
}

.tablepress-id-175 .column-10 td {
	width: 5% !important;
}

.tablepress-id-175 .column-11 td {
	width: 10% !important;
}

.tablepress-id-175 .column-12 td {
	width: 5% !important;
}

.tablepress-id-175 .column-13 td {
	width: 4% !important;
}

.tablepress-id-175 .column-14 td {
	width: 5% !important;
}

.tablepress-id-175 .column-15 td {
	width: 5% !important;
}

I have tried without td and without !important– nothing seems to be working. I have also tried:

#tablepress-175_wrapper {
  width: 400px;
}

I have tried various other things – nothing seems to be working! How can I fix this please?

Thanks!

Hi,

the width of those columns is now governed by that .rotate <div> that you added, so you would have to play around with the width of that:

.tablepress-id-175 .column-3 .rotate {
	width: 24px;
}

The problem then is that the box will be moved up. To fix that, you could try adding

.tablepress-id-175 .column-3 .rotate {
	width: 24px;
	top: 140px;
	position: relative;
}

Regards,
Tobias

Awesome – fixed the problem! Thanks!