adapting column and table width

Hi,

thanks for your question, and sorry for the trouble.

From what I can see, that table contains several empty and unused columns on the right.
You will simply have to delete those on the “Edit” screen, by clicking the checkboxes below the columns and then using the “Selected columns: Delete” button.

Regards,
Tobias

Hi Tobias!
Thank you for your reaction.
Yes, I forgot to delete the empty columns (when I import a table from Excel, it always takes a couple of empty columns)

But now the ‘invisible’ table is still taking space, which width css commands do I need to use (percentages, pixels.. for me, this is still kind of confusing) to give the table more balance visually?

Thanks!
Nathalie

Hi,

you must first delete the emtpy columns, otherwise, the CSS is pretty much useless, as the browser can not implement it.
After deleting the extra columns, you might not even need CSS.

Regards,
Tobias

Yes, I did, but can I also then ‘hide’ the last column, that is made invisible in the custom commands, without loosing it’s searchable content?

Thanks!
Nathalie

Hi Nathalie,

as far as I can see, the table at https://www.heelhulpje.nl/?page_id=1001 still has several empty columns on the right…
Or are we talking about a different table?

And yes, even if you delete those, you can make the last column invisible, while keeping it searchable, with a “Custom Command like

"columnDefs": [ { "visible": false, "targets": 7 } ]

(which you are using already.

Regards,
Tobias

Hi Tobias,
Well, I now have to refer to you last remark in another thread, a few days ago: I am being extremely human this week… ;0
Indeed, I did delete the empty columns, but I didn’t save these changes before checking them… sorry, that caused some misunderstanding!

But I still see an empty column on the right, and I believe that is the ‘invisible’ one. Or am I wrong and is this empty space caused by something else maybe? How do I get rid of it?

Thanks!
Nathalie

Hi Nathalie,

no, there’s no “invisible” column showing on the right.
Your table has 8 columns (on the “Edit” screen), and on the frontend, you have successfully hidden the 8th one (so that it is invisible, but still searchable (if it had any content)).

Regards,
Tobias

Hi Tobias, thanks for checking, now I still do not understand why I see an empty space on the right end… I checked in another browser, but there it is the same.

I did set the column width of some columns, but I did that with percentages, so I thought that it would not influence the total table width… but what does?

Thanks!
Nathalie

Hi Nathalie,

you are simply seeing that white space, because the column 7 does not have a width set.
Just add a width for it via CSS, and it should be smaller.

Regards,
Tobias

Oohh! Thanks ?? I had no idea!

Is is better to keep working with percentages to adapt the column widths, or should I use pixels? What do you suggest?

Thanks!
Nathalie

Hi Nathalie,

it doesn’t really matter from a technical point of you view, so I suggest to use what’s easier for you.

Best wishes,
Tobias

Ah ok, thanks! And so sorry that this all seemed so much more complicated than it actually was..!

Have a good evening ??

Nathalie

Hi,

no worries, always glad when I can help!

Best wishes,
Tobias