Max row (th/td) height in responsive table ?

snuuve

Is it possible to set max-height to tr/th/td in DataTables? Im using responsive plugin and i want have data in one line. If in cell is too much text it is wrapped into few lines. When it happens i want to responsive my table ( hide some columns so this colum data will be displayed in one line). I hope i explain it clearly.

Image : http://i57.tinypic.com/wbp1z5.png

Spaghetti_Monster

I'm in the same situation, wanting to constrain the row height so that my responsive table will cause the columns to become hidden if necessary to make width room rather than having the row height continue growing to accommodate the content.

Is this possible?

mrd05d

So i am not sure about the responsive piece but i was running into a similar problem. I came up with the following with css to truncate the info after the width of the column and put ...

http://live.datatables.net/sekoqepu/1/edit?html,css,js,output

mrd05d

I also added some code to the live datatables example above to load the title of the cell with the value of the td so on hover you can see the full text...

allan

If you want to have the data all in one link, just add the class nowrap to the DataTable. Or if you aren't using the DataTables default stylesheet, use a little CSS to set white-space: nowrap for the cells in the table.

Allan

mrd05d

Yes that is what i did in my example. this also puts an ellipsis in the cells that would have the width greater than the set width for the cells. I also made it so jquery would stick the data in the td inside the title tag so on hover it would show the cell contents if they are not fully showing.

td{
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

allan

Very nice :-). Like it!

Allan