Siddharth Shanker Mishra

DataTable is widely used jQuery based library for displaying data in tabular format.

It gives many straight forward configuration options so that you can format your data nicely so that it can make end used happy seeing it, but it always not that easy when it comes to word wrap the text in columns.

Yes, its correct, and most probably you are reading this post because you are dealing with such issue right now. Here I will show you how you can fix this.

You will need to do some CSS changes. Put below code in the file where you are using DataTable.

<style>
    table td {
        word-break: break-word;
        vertical-align: top;
        white-space: normal !important;
    }
</style>

This will make the column word wrap the contents. Here I have used it on table element itself, because on my page I have only one table, but in case you have different then you may use table ID or class name to apply this styling rule.

It doesn’t matter if you have assigned the column width in pixel or in percentage. I tried it with and without response setting one and autowidth off. In both cases it was working fine.

Hope this will be helpful for you.