Long entries in responsive tables

Long entries in responsive tables

DalderDalder Posts: 28Questions: 11Answers: 1

Hello there

Example: http://live.datatables.net/cadecise/1/edit

I was wondering if I could get some advice regarding the above. If I have a particularly large piece of data in a cell that is collapsed, it extrudes the tables width when displayed. (To see this happen, expand the top row in the table, it will add a horizontal scroll bar to the table and stretch it to fit this data).

Is there any built in functionality to apply wrap/overflow when this happens?

I also have a secondary question, how could I handle longer pieces of data if they had not been hidden by the responsive extension? (for example I'm assuming this could happen if a long piece of data was in the first column of the table) Am I right in thinking I could use the ellipsis plugin to limit this secondary issue?

Thanks in advance,


This question has an accepted answers - jump to answer


  • allanallan Posts: 60,903Questions: 1Answers: 9,927 Site admin
    Answer ✓

    Hi Dan,

    You have the nowrap class on the table which applies white-space: nowrap to the text components in the table.

    span.dtr-data {
      white-space: normal;

    Should do the trick: http://live.datatables.net/cadecise/2/edit . You may want to adjust the layout a bit more (columns) or that might work for what you want.


  • DalderDalder Posts: 28Questions: 11Answers: 1

    Thanks Allan, that did the trick.

    I also ended up changing the display to block on both dtr-title and dtr-data to to get a cleaner finish.

Sign In or Register to comment.