Maximum width of columns in responsive tables

Hi,

thanks for your post, and sorry for the trouble.

The problem here is more a problem of the row heights. Due to the table being flipped to the side, the browses a different calculation of the heights. This is important if a cell has line breaks in it, and thus TablePress tells the browser to avoid adding automatic linebreaks.
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

Thanks, Tobias. You can see an example here: https://worldpolicyforum.org/tables/financial-assistance-available-per-month-low-income-families-children-disabilities/

Hi,

thanks for the link! Here is some CSS code that should make the table look better by adjusting width and columns.
Just paste that into the “Custom CSS” textarea on the “Plugin Options” screen of TablePress and then clear the cache of the CSS minification plugin that you are using.

@media (max-width: 979px) {
	.tablepress-id-25 thead th {
		white-space: normal;
		width: 160px !important;
	}
	.tablepress-id-25 tbody td {
		white-space: normal;
		width: 250px;
	}
	.tablepress-id-25 .column-1,
	.tablepress-id-25 .column-5,
	.tablepress-id-25 .column-6 {
		height: 45px;
	}
	.tablepress-id-25 .column-2,
	.tablepress-id-25 .column-3,
	.tablepress-id-25 .column-4 {
		height: 100px;
	}
}

Regards,
Tobias

Hi Tobias,

I really appreciate you taking the time to help us out with this. I followed your instructions, but I am afraid the issue persists. The headers still occupy all of the horizontal space available (they expand up to 460px wide), making it impossible to scroll horizontally.

With the new CSS, the “search text” is also floated to the right, being covered by the search box. Take a look at the link that I posted before.

The only CSS rules that I added, in addition to the ones you suggested above, are these:

.tablepress thead th,
.tablepress tfoot th {
	background-color: #EDF2F7;
}

.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
	background-color: #4679B2;
}

.paginate_enabled_previous:before,
.paginate_enabled_next:after {
	color: #EDF2F7;
}

.paginate_disabled_previous:before,
.paginate_disabled_next:after {
	color: #F9F9F9;
}

.paginate_enabled_previous:hover:before,
.paginate_enabled_next:hover:after {
	color: #4679B2;
}

.column-filter-widget {
	float: none;
	padding: 5px;
	max-width: 766px;
}

What else could it be?

Hi,

ah, we need to be more strict with some CSS. Please replace

.tablepress-id-25 thead th {

with

.tablepress-responsive-tablet.tablepress-id-25 thead th {

For the search field: That’s broken because your theme adds some really weird CSS for the positioning of all input fields. To fix that, please add this to the “Custom CSS”:

.dataTables_wrapper label input {
  position: static;
}

Regards,
Tobias

Thanks Tobias. That fixed the search field, but the columns are still too wide to be properly displayed on a phone. Do you have any additional suggestions?

Hi,

the table is now on a password protected page, so I can’t check ??

Regards,
Tobias

Sorry about that, Tobias. The site should be accessible again if you want to take a look.

Hi,

thanks! Now, everything looks pretty good to me now, actually. The only idea I would have here is to decrease the column widths further (by editing the CSS from above). At the same time, you would then have to increase the cell heights of course…

Regards,
Tobias

Hi Tobias,

Yes, you are right, it definitely looks good (I was looking at a different table)! I modified the code so that it applies to all tables and thing are looking good now. I really appreciate you taking the time to help us with this.

Cheers!

Hi,

no problem, you are very welcome! ?? Good to hear that everything is working now!

Best wishes,
Tobias

Hi Tobias,

Sorry to bother you again, but I noticed that the tables are not responsive in IE 9 (haven’t had a chance to test with other versions). Is there anything that can be done about that?

Thanks.

Hi,

no, sorry. The “Responsive Tables Extension” does not work in IE at this time.
I hope to be able to add support in the future.

Regards,
Tobias