Rumah > hujung hadapan web > html tutorial > thead与td无法对齐该怎么办?

thead与td无法对齐该怎么办?

零下一度
Lepaskan: 2017-07-17 16:38:27
asal
2408 orang telah melayarinya

当使用工具条中的显示/隐藏列的时候, 经常出现表格的列头与内容无法对齐的问题。

网上搜到两种处理方法,如下:

1. 去掉option中的height,完美对齐,但当数据较多的时候,table会自动增加height,显示所有数据而不显示滚动条。

2. 注释掉如下两行

//this.resetHeader();
//padding += this.$header.outerHeight();
Salin selepas log masuk

   完美对齐,但会导致无法冻结表头。

 

这两种结果都是鱼与熊掌不可兼得, 被影响的功能也是非常想要的。

怀疑问题的原因应该是列的减少过程中,剩余列设置了宽度,但减少列后要填充剩余宽度时的计算问题。

 

 最后自己采用了如下方式,供大家参考:  

不设置其中一列的宽度,使其自动填充,如下代码

        <thead><tr><th data-field="Code" data-width="105px">编号</th><th data-field="Name" data-switchable="false">姓名</th><th data-field="Sex" data-width="120px">性别</th><th data-field="Age" data-width="120px">年龄</th><th data-field="School" data-width="30px">学校</th></tr></thead>
Salin selepas log masuk

 这样只要不去掉名称,去掉其他列的时候不会出现对不齐的问题,为了防止此列被去掉,加上data-switchable="false"

 正常业务中也经常会有这样要求自动填充宽度的列,算是比较好的一种解决方式。

Atas ialah kandungan terperinci thead与td无法对齐该怎么办?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan