Question

我在bootstrap div中有一个Jquery Datatable。 Bootstrap行在Datatable和Chartjs图表之间划分。

在不带任何选项的情况下初始化DataTable时，布局将保持良好状态，而不会出现任何重叠。但是，当我添加以下代码以添加列过滤选项时，布局被破坏了。

import java.util.Scanner;

Scanner scanner = new Scanner(System.in);

//reads the input until it reaches the space
System.out.println("Enter a string: ");
String str = scanner.next();
System.out.println("str = " + str);

//reads until the end of line
String aLine = scanner.nextLine();

//reads the integer
System.out.println("Enter an integer num: ");
int num = scanner.nextInt();
System.out.println("num = " + num);

//reads the double value
System.out.println("Enter a double: ");
double aDouble = scanner.nextDouble();
System.out.println("double = " + aDouble);


//reads the float value, long value, boolean value, byte and short
double aFloat = scanner.nextFloat();
long aLong = scanner.nextLong();
boolean aBoolean = scanner.nextBoolean();
byte aByte = scanner.nextByte();
short aShort = scanner.nextShort();

scanner.close();

我注意到最低的代码是导致问题的代码。我该如何解决？

JSFiddle for the code

Answer 1

您的表比它所占据的Bootstrap列宽，并且会溢出到graph列。

您可以

使表具有响应性，以便它仅占用列空间。参见https://datatables.net/extensions/responsive/
或者您可以将overflow: scroll样式添加到包含表的列中。

使用列过滤时，jQuery Datatables重叠

1 个答案: