javascript - 如何将 jQuery 数据表行高设置为非常小的数字？我需要一个非常 "compact"表

Question

“如何为 jQuery 数据表设置行高”是一个常见问题，我知道该怎么做。但我想做的是将该值设置为一个非常小的数字，但我没有这样做。

看看下面的例子: http://jsfiddle.net/x9o891c5/

#example tr td {
    height: 50px;
}

行高设置为50px，效果不错。当我将该数字更改为 30px 或 70px 时，运行它，高度也会正常更改。

但是当我尝试将该值设置为非常小的数字(例如 10px、5px 甚至 1px)时，高度不会改变。看起来数据表非常“智能”，它会检测其包含的内容的高度，并且不允许用户设置非常小的值。

但我想做的是，创建一个非常“紧凑”的表格，它能够在小屏幕(例如 1366*768 笔记本电脑屏幕)中显示更多数据，而无需向上/向下滚动.所以我想挤出任何利润。看看示例表，还有一些余量。但我需要一张没有那个边距的 table : A Microsoft Word table without any margin

我什至可以接受部分文字被遮盖了。

Answer 1

您遇到的问题不是由数据表引起的，而是由 <td> 引起的本身。任何带有 display: table-cell 的元素将扩展以包含其所有内容。要么使用 line-height如其他答案所述，或将每个单元格的内部内容包装在 <div> 中并设置 <div> 的高度.

(如图所示: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>