CODEWITHSUNDEEP
javascriptjqueryhtmlcssdatatables
Vespene Gas
Vespene Gas

Reputation: 3760

How to set jQuery datatables row height to a very small number? I need a very "compact" table

"How to set row height for jQuery datatables" is a frequently asked question and I know how to do it. But what I'm trying to do is, to set that value to a very small number, but I failed to do that.

Take a look at the following example: http://jsfiddle.net/x9o891c5/

#example tr td {
    height: 50px;
}

The row height is set to 50px, which works well. When I change that number to 30px or 70px, an run it, the height is changed normally, too.

But when I try to set that value to a very samll number, such as 10px, 5px or even 1px, the height doesn't change. It seem that the datatables is very 'smart', it detects the height of the content it contains and don't allow user to set a very small value.

But what I'm trying to do is, to create a very "compact" table, which is able to show more data within a small screen, such as a 1366*768 laptop screen, without having to scroll up/down. So I want to squeeze any margin out. Take look at the example table, there is still some margin. But I need a table without that margin: A Microsoft Word table without any margin

And I can even accept that part of the text is eclipsed.

Upvotes: 1

Views: 5231

Answers (3)

kdojeteri
kdojeteri

Reputation: 805

What you're experiencing is not caused by datatables, but rather by <td> itself. Any element with display: table-cell will expand to contain all of its contents. Either use line-height as outlined by other answers, or wrap the inner contents of each cell in a <div> and set the height of that <div>.

(As shown here: https://stackoverflow.com/a/7190647/1543004)

<style>
    td > div { height: 5px; }
</style>
<tr>
    <td><div>Foo</div></td>
    <td><div>Bar</div></td>
    <td><div>Baz</div></td>
</tr>

Upvotes: 2

Gee_63
Gee_63

Reputation: 76

You can change your line-height or decrease your font size as your table size decreases.

#example tr td {
height: 4px;
line-height: 1; // or line-height: 0.8 etc
font-size: 12px;

}

Upvotes: 1

Ankur
Ankur

Reputation: 53

You can manage the height of the rows by reducing the line-height as well as the height of the content of td.

For example:

#example tr td {
line-height: 10px;

}

Upvotes: 0

Related Questions