Unable to control column widths

Hi,

yes, the reason for this is that you have too much content in the table, which just can’t fit on the page. You will either have to remove columns or need to use the horizontal scrolling.

And, due to the horizontal scrolling, the idea of setting column widths in the Shortcode can not be used, but the method with the “Custom CSS” should work. Please try again with

.tablepress-id-1 .column-11 {
  width: 300px !important;
}

That should make the eleventh column wider, which will also have an effect on the row heights.
Changing the row heights separately from that is not possible, as you’d have the same problem as with the width: The content of the cell has to go somewhere, so that the amount of content defines the minimum height.

Regards,
Tobias

Sadly, that does not work; the column width does not increase to 300px, and the header/column alignment is also thrown off…

https://dev.studiotwo.com/jttest/sample-page/

There is an overall width (1410px) and individual column widths being written into the code, which my css styles can’t seem to override.

Hi,

thanks for testing. That’s indeed unfortunate ?? My assumption is that the horizontal scrolling feature (which comes from an external JavaScript library) needs a different way of initialization.
Please try changing the table’s Shortcode to

[table id=1 datatables_scrollx="2000px" /]

That should make the entire table wider, so that the column width is hopefully applied.

Regards,
Tobias

Bummer. That did not change the behavior. CSS-defined width is still ignored, and the header/column alignment still gets messed up.

For the moment, I’ve returned to the basic shortcode with no parameters, and disabled the custom CSS. But if you have any other ideas, I’d love to hear them.

Sincere thanks for all the time you’ve spent trying to resolve my problem.

Hi,

bummer, indeed.

Ok, I have one more idea ?? If fixing the width with CSS does not work, we’ll try fixing it with a wrapping container around a container. To do that, please
1. Remove the Shortcode parameter that I suggested above.
2. Change the “Custom CSS” to

.tablepress-id-1 tbody .column-11 div {
  width:300px!important
}

3. and wrap the entire content of the “A babe died at…” cell in the first row with a HTML <div> tag, i.e.

<div>A babe died at ... Fleming #2.]</div>

That should fix the minimum width of the cell content of the eleventh column, which should fix the width correctly for the entire column.

Regards,
Tobias

SO CLOSE! That works… but only on the first page of results. As soon as you view the next page, that first cell is no longer visible, and the columns revert back to their default widths.

I suppose I could use a script or something to put div tags around every value in the columns I want to resize…

Or perhaps “freeze” one row at the top?

Hi,

ah, yes :-/ As the <div> is only in the first row, it will only do the change on the first page.
I don’t know if freezing a row at the top is possible, so simply wrapping all cells of column 11 in a <div> tag should indeed be the best way to go.

Regards,
Tobias

I re-wrote the VB script that I was using to clean/export from Excel, adding div tags around the contents of each cell. Re-imported into TablePress, set the column widths in the TablePress Custom CSS as you suggested:

.tablepress-id-2 tbody .column-11 div {
width:300px!important
}

et voila! I can now control the column widths.

Thanks for the suggestions and assistance.

Hi,

awesome! That’s great news! Good to hear that this could be done by simply extending your script! ??

Best wishes,
Tobias

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