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

标签 javascript jquery html css datatables

“如何为 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

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

最佳答案

您遇到的问题不是由数据表引起的,而是由 <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>

关于javascript - 如何将 jQuery 数据表行高设置为非常小的数字?我需要一个非常 "compact"表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46172262/

相关文章:

JavaScript Geolocation 在所有 Android 浏览器中都失败 - 在 iOS 和 PC 上工作

Javascript:动态更改 CSS 文件 + Cookie

css - IE 不设置 HTML5 标签的样式(使用 shiv)

html - 如何在 html 字段中放置常量符号

javascript - 按 iso 字符串降序排序不起作用

Javascript 日期问题,时区不正确

javascript - 从弹出窗口检索值到父窗口

javascript - Jquery Popup 不居中

javascript - 简单的 jQuery 赋值

html - 由于背景图片,css 样式的单选按钮不起作用