javascript - Reduce dataTable tr height

I am using dataTable jquery plugin.
I need to reduce the height of the rows, how can I do it? (I need a fixed height)

I tried:

.dataTables tbody tr {
    min-height: 35px; /* or whatever height you need to make them all consistent */
}

JSFiddle

I am using dataTable jquery plugin.
I need to reduce the height of the rows, how can I do it? (I need a fixed height)

I tried:

.dataTables tbody tr {
    min-height: 35px; /* or whatever height you need to make them all consistent */
}

JSFiddle

Share Improve this question asked Sep 8, 2014 at 16:20 Nk SP 8625 gold badges19 silver badges37 bronze badges

1 TR don't have height. You'll have to apply the height to its tds. Little fiddle for you – Mysteryos Commented Sep 8, 2014 at 16:33

Add a comment |

4 Answers 4

Sorted by: Reset to default 6

tr don't have height.

You'll have to apply the height to its tds

Click here to see the fiddle

Change the td padding CSS like this:

table.dataTable tbody th, table.dataTable tbody td {
        padding: 1px 1px; 
}

CSS's padding will also do the trick - take a look at this example here. This came from this forum discussion.

Set this in your CSS:

<style>
    td {
        white-space: nowrap;
        max-width: 100%;
    }
</style>

These DataTable options will make it even better:

scrollY: "530px",
scrollX: true,
scrollCollapse: true,