Please wait...

Table layout and word wrap

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

Different table layoutsWhy do different table types require different layouts

wpDataTables limit table layout

Different tables require different layouts on the page. Some tables have a lot of narrow numeric columns, and need more width, but one-line rows; 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 works best when the table has a lot of columns, but even when the table has only several columns with long text content it can get wider then the screen, and the horizontal scrollbar appears.

Limiting table widthHow to limit wpDataTables width to fit in container

To limit the table width to the parent container width (so it wouldn’t be wider then the page) you need to enable the “Limit table width” switch in the “Display” tab on table settings page. When “Limit table width” option is enabled, “Word Wrap” block will be shown.

wpDataTables limit table width
wpDataTables limit table width

When this is done, and the table is saved, it will be limited in width to fit the container. 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 enable the “Word Wrap” feature which will be explained below.

Word wrapMaking words wrap to multilines

When “Limit table width” option is enabled, “Word Wrap” block will be displayed. Enable this to wrap long strings into multiple lines and stretch the cells height.

wpDataTables Word Wrap
wpDataTables Word Wrap

This will make the cell content to break into several lines.

Columns widthDefining the width for specific columns

When the “Limit table width” option is enabled you can also define the columns widths (please note that you will not see “Column width” block in the column settings panel until this switch is enabled). You can define them either in percent, or in pixels (You can enter just a number without “px”). E.g. We set the width for the first column in this example table in percent.

wpDataTables column width
wpDataTables column width

The second column get wider and now it is 10% wide of the whole table width.

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.