Please wait...

Table layout and word wrap

Video versionA video overview of table layout and word wrap in wpDataTables

Table layout in wpDataTable

Different tables require different layouts on the page: some tables have a lot of columns, and need more width, some tables have several columns, but long content in the cells, and it makes sense to wrap the words, but limit the table width to keep it same with the page. By default the table isn’t limited in the width, and the cells content is printed in one line. It makes sense when the table has a lot of columns, but even when the table has only several columns it can get wider then the screen, and the horizontal scrollbar appears:

Limit table width

To limit the table width to the parent container width (so it wouldn’t be wider then the page) you need to tick the checkbox “Limit table layout” in the “Additional settings” section of the step 1 on table edit page:

When this is done, and the table is saved, it will be limited in width to fit the page:

Word wrap

This makes the table fit the screen, but now if the cell content is too wide, it gets cut with a “…” – to avoid this you need to tick the “Word Wrap” checkbox. This will make the cell content to break into several lines:

Columns width

When the “limit table layout” option is enabled you can also define the columns widths (please note that they will be ignored until this checkbox is ticked). You can define them either in percent, or in pixels. E.g. if we set the widths for first two columns in this example table in percent:

They get wider:

Also we can do the same in pixels (without the “px”):

Never miss new features!

Join 2000+ newsletter subscribers

Never miss notifications about new cool features, promotions, giveaways or freebies - subscribe to our newsletter! We send about one mail per month, and do our best to keep our announcements interesting.

We never spam or disclose your address to anyone.