个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在使用DataTables显示我的数据。我将其宽度指定为 4 个引导列。尽管所有数据都可以适合指定的宽度，但我的表格现在在底部出现了不需要的水平滚动:
向右滚动，我看到顶部的搜索框是这次滚动的原因:
是什么让盒子位于太右侧？我该如何解决这个问题？
$(document).ready(function () {
var data = [
{ title: "The Godfather"},
{ title: "The Shawshank Redemption"},
{ title: "The Lord of the Rings: The Return of the King"},
{ title: "The Godfather: Part II"},
{ title: "Shichinin no samurai"},
{ title: "Buono, il brutto, il cattivo, Il"},
{ title: "Casablanca"},
{ title: "The Lord of the Rings: The Fellowship of the Ring"},
{ title: "The Lord of the Rings: The Two Towers"},
{ title: "Pulp Fiction"}
];
var table = d3.select("#myTable");
var rows = table
.select('tbody')
.selectAll('tr')
.data(data)
.enter()
.append('tr');
var cells = rows
.selectAll('td')
.data(function (data_row) {
return [data_row['title']];
})
.enter()
.append('td')
.text(function (d) {
return d;
});
$('#myTable').DataTable({
scrollY: '60vh',
paging : false,
});
});body {
padding-top: 1%;
padding-bottom: 1%;
background: #585858 !important;
color: white;
}<!DOCTYPE html>
<head>
<title>Data Tabke</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome lib -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css">
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- dataTable -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div id="FilterableTable" class="col-4">
<div class="table-responsive">
<table class="table table-striped table-dark table-hover table-fit" id="myTable">
<thead class='thead-dark'>
<tr>
<th>My data</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div id="FilterableTable2" class="col-8">
<div class="table-responsive">
<table class="table table-striped table-dark table-hover table-fit" id="otherTable">
<thead class='thead-dark'>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"></script>
<!-- Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<!-- dataTable -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<!-- D3 -->
<script src="https://d3js.org/d3.v3.min.js"></script>
</body>使用代码片段更新。
最佳答案
我找到了一种方法来解决这个问题，使用 DOM positioning DataTables 本身。我需要将表的结构指定为 <f>ti初始化表时:
$('#myTable').DataTable({
scrollY: '60vh',
paging : false,
dom : "<f>ti"
});
然后将搜索框设置为向左浮动:
#myTable_filter {
float: left !important;
}
ID myTable_filter由 DataTables 自动生成，因此我需要检查 Chrome 中元素的正确 ID。
<f>ti 的说明位:
f 元素，或 Filtering ，根据 DataTables 文档)包装在带有 < 的 div 中。和> .t元素。i )位于最后。这是显示“显示 1 到 x，共 x 个条目”的信息行关于JavaScript 数据表 : remove unwanted horizontal scrolling，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61603666/
25
4
0
我遇到了异常对话框的问题:我正在使用 RemObjects SDK for Client/Server -application。当出现连接问题时，客户端开始抛出“简单”异常对话框，只有文本和一个按钮
我遇到了问题。我的 JFrame 从其中的内容开始，但以透明方式显示，内容位于顶部。 package javagame; import java.awt.Color; import java.awt.
我开始研究 Python 3.5 的 logging 包。我在 main 文件中设置了这两个命令来登录 import logging logging.basicConfig(filename=r'fr
我一直在练习我的菜单 CSS 技巧，遇到了不需要的填充情况。菜单中“test2”和“test3”的下拉菜单在文本的左侧有填充。我不知道是什么原因造成的。有什么建议吗？ 谢谢 HTML tes
我目前有一个非常奇怪的错误。 一个方法被调用，它应该通过停止它来隐藏一个 UIActivityIndicatorView(启用停止时自动隐藏)和一个名为 badIndicatorUIImageVi
所以我有两个 excel 工作簿 - 工作簿 A 用作用户表单，工作簿 B 用作包含所有数据条目的数据库(B 是合并文件)。每当我打开工作簿 A 时，我想自动从工作簿 B 中提取所有数据并将其复制到工
当您在Delphi XE6中编译DLL时，它会自动从System.Rtti.pas导出函数TMethodImplementationIntercept。我试图找到一种方法来避免这种导出，但没有找到任何
您如何定义“不需要的代码”？ 编辑: 恕我直言，任何具有 0 个事件调用成员(递归检查)的代码成员都是不需要的代码。 (函数、方法、属性、变量都是成员) 最佳答案 这是我对不需要的代码的定义: 不执行
我正在尝试使用以下代码将字典值列表提取到文件中: import csv def function(file, output, deli = ','): dictionary = dict()
我正在编写一个程序，用户输入 2 到 1000000 之间的正整数，如果它是质数，则打印“该数字是质数”，如果不是质数，则打印因式分解的号码。每当我输入一个素数(即:3)时，它都会打印出它是一个素数，
在我的网站上 here ，我用 CSS 和 Javascript 实现了多层视差滚动。页面上下滚动，我有 6 个图层都在视差中移动。向后的每一层以比前面的层稍慢的速度滚动。 在我单击右上角的汉堡菜单之
这是我的应用: http://jsbin.com/axeWOwAN/1/edit http://jsbin.com/axeWOwAN/1 (全屏) 如您所见，在第二页中有一张 map ，它无法正常工作
我有这个简单的 bash 脚本:我在参数中传递的每个文件上运行 ns 模拟器，其中最后一个参数是要搜索的一些文本字符串。 #!/bin/bash nsloc="/home/ashish/ns-alli
我对Python很陌生。我尝试通过加载包含两个数字数组的 .txt 文件来绘制图。情节看起来不错，但还有一条我无法摆脱的额外线条。我已在此处附上我的代码。请帮忙!谢谢。 import numpy as
我目前正在尝试使用 SPNEGO library 将 Java 客户端实现到受 SPNEGO 保护的 Web 服务来自 SourceForge(服务器使用相同的库)。我无法让它成功验证，我的请求总是以
我有一个枚举类，它有几个常量，我想添加一些静态值 FOCUSED，它指示哪个枚举值具有焦点... 我找到了一个方法: package messagesystem; /** * * @author
我想校准我的相机。目标是消除失真并且不裁剪图像(如上一张照片)。我是这样做的: 1)加载图片，找到棋盘的角 import cv2 import numpy as np import os import
我正在使用DataTables显示我的数据。我将其宽度指定为 4 个引导列。尽管所有数据都可以适合指定的宽度，但我的表格现在在底部出现了不需要的水平滚动: 向右滚动，我看到顶部的搜索框是这次滚动的原因
有一个定制的导航栏，并且在 iOS 9 之前一直完美运行。横向模式下出现奇怪的边距。 使用标准代码来创建此布局。 - (UIBarButtonItem*)leftMenuButton { UI
我尝试修改以下示例以实现实时绘图。 Embedding a matplotlib figure inside a WxPython panel 我正在尝试读取来自 Arduino 的串行数据并绘制/更
我是一名优秀的程序员,十分优秀！