Bootstrap 引导表表头和表体未正确对齐

izj3ouym  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(4)|浏览(175)

我已经创建了一个引导表。我正在使用javascript动态添加行。但问题是表头和表体没有正确对齐。我已经创建了下面的代码片段。
第一个
但是当我在css中删除display block的时候,tbody的高度会变小,因为我希望表体在高度增加到超过默认的高度设置时自动滚动,所以我使用了display block。
我不知道我哪里错了。请帮助我!谢谢

pbpqsu0x

pbpqsu0x1#

好吧,给你.

  1. min-heightheight适用于block级别元素,而table不是block级别元素。因此,如果您删除下面的代码,您最初的对齐问题将得到解决,但tbody不会采用您定义的200 px高度,因为在您删除下面的类后,它不再是块级别元素。
table.alpha .thalpha,.tbalpha{

display:block;}

1.所以这里有一个解决方案。
a.首先删除上面的类,这将有助于解决最初的问题。
B.要使高度达到预期,您需要将整个表格设置为display:block,并为其给予一个min-height。请在css文件中引用#myTable1
c.最后,在主表#myTable1中,您必须根据align您的hide类(加号)设置相对位置,因为我们要将其移出table范围,并使其成为一个单独的div
d.#hide div现在已经可以进行样式设置了。我们将它设置为position:absolute,以便它从第一个non-static父代开始定位,并根据#myTable1最小高度设置top值。这样就完成了。
工作副本如下。
第一个
希望这对你有帮助,祝你好运!

3j86kqsm

3j86kqsm2#

从table、head、tbody标签中删除display:block。它们有默认的显示样式来对齐您的表
表α α,t α {

display:block;

}这应该可以修复它,你也不需要设置宽度到td元素,td元素,共享宽度与th(在同一列)元素

g9icjywg

g9icjywg3#

只需将您的css overflowauto更改为覆盖。

更改代码:

table.alpha .tbalpha{
    height:200px;
    overflow-y:auto;
}

用这个

table.alpha .tbalpha{
    height:200px;
    overflow-y:overlay;
}
vxqlmq5t

vxqlmq5t4#

删除rowspancolspan属性将生效。

相关问题