手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

bootstrap-table如何固定高度

时间:2024-10-15 06:36:13

1、首先说明一下编乩态祗嚆辑器大家可以根据自己的喜好进行选择,我这里选择的是Sublime Text 3。你用记事本也是可以的。我们先来看一下我们本次的文件结构吧,如下图所示:飧肇苡卫只有2个文件,一个是bootstrap的样式文件(bootstrap.css),一个是html文件(用于效果展示)

bootstrap-table如何固定高度

2、下面的话我们就要在我们的html文件中新建一个table了,然后我们给table引入bootstrap的样式类table,table-bordered,table-hover,建好的表格结构如下所示:

bootstrap-table如何固定高度

3、我们下面就往tbody里填充一些数据吧,多填充一些,看看浏览器会有什么反应。我们运行以后发现浏览器右边出现了滚动条,这个应该不难理解吧。数据多了,浏览器会出现向下的滚动条,这是浏览器的特性。

bootstrap-table如何固定高度
bootstrap-table如何固定高度

4、现在就到了我们的主题了,我们该如何做,才能固定我们table的高度不让他出现滚动条那?这在实际的应用中都是很使用的问题了。

bootstrap-table如何固定高度

5、OK,下面我们来具体解决这个问题,我们首先想到的是给table一稍僚敉视个高度,如下图所示,但是,我们运行以后,发现并没有起作用。这是为什么那?因为虽然你给table设置了高度,但是其内部文眺螗熨膣本的长度远大于高度,并且table所在的容器(浏览器)也是无限大的,所以他并没有作用。

bootstrap-table如何固定高度

6、下面我们想到的就是在table外面在包裹一层div做容器,我们给div设置高度,这样table不管多长只能在div里了。现在我们运行的话看到table的高度已经固定为600像素了,但是你可能会发现右边还是有滚动条,这是因为我们用的overlow:auto的缘故。

bootstrap-table如何固定高度
bootstrap-table如何固定高度

7、在我们平常的例子中如果不想有滚动条的话,那么唯一的做法就是对数据进行分页,这样每一页出来的数据正好是我们定义的table的高度即可,就向下面这样的格式:

bootstrap-table如何固定高度

8、以上就是小编对bootstrap-table固定高度的分享了,总结就是就table放在div里,给div设置height,并让其overflow为auto,最后在与后台结合进行分页,问题就解决了。

© 手抄报圈