"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.