2

This seems like a simple problem, but I can't seem to work it out.

I have a Datatables table, and one of the elements contains a free-form text field. When displayed in the table, I want this to only display the first line of this text field, rather than all of it.

I've created a jsfiddle here: JSFiddle

And an example picture showing what I'm trying to achieve: Example image

I've tried to set the height of the <td> as below, but this doesn't work.

height:     20px !important;
min-height: 20px !important;
max-height: 20px !important;

It works for expanding the cells larger (eg: 80px), but not smaller...

I also tried this: JQuery Datatables row height but no joy.

Any help would be greatly appreciated.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
mr-smudge
  • 25
  • 1
  • 6

1 Answers1

3

It works when you put a block element inside your td, for example a div. See the updated fiddle for the working code. If you only want to limit bigger cells you should then use max-height in your CSS.

            <tr>
                <td>Brazil</td>
                <td>
                    <div>
                        500
                        <br>500
                        <br>500
                        <br>
                    </div>
                </td>
                <td>200</td>
            </tr>
Raidri
  • 17,258
  • 9
  • 62
  • 65
  • Thanks. If I load the data into my table using an AJAX call, though, then I think I would need to do some extra fiddling (http://datatables.net/forums/discussion/2025/fnrowcallback-and-fnupdate) in order to wrap it in a
    when loading the data. Is there another alternative?
     – mr-smudge Dec 08 '15 at 12:49
  • I don't think so, but there may be some I can't think of. – Raidri Dec 08 '15 at 13:16