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

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

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

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

2. 注释掉如下两行

//this.resetHeader();//padding += this.$header.outerHeight();

登录后复制

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

 

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

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

 

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

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

        编号姓名性别年龄学校

登录后复制

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

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

以上就是thead与td无法对齐该怎么办?的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3196100.html

(0)
上一篇 2025年4月1日 02:46:23
下一篇 2025年3月7日 20:58:20

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 导航条(navbar)和导航(nav)的介绍

    Bootstrap 导航栏 导航栏是一个很好的功能,是 bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 boot…

    编程技术 2025年4月1日
    100
  • Bootstrap各种进度条的实例讲解

    本章将讲解 bootstrap 进度条。在本教程中,您将看到如何使用 bootstrap 创建加载、重定向或动作状态的进度条。 Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前…

    编程技术 2025年4月1日
    100
  • Bootstrap缩略图的详细介绍

    本章将讲解 bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。bootstrap 通过缩略图为此提供了一种简便的方式。使用 bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 class .thumbn…

    编程技术 2025年4月1日
    100
  • Bootstrap警告框的详细介绍

    警告框(alert)消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框(alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能。 用法 您可以有以下两种方式启用警告框的可取消(dismissal)功能: 通…

    编程技术 2025年4月1日
    100
  • 分析bootstrap导航栏及其响应式的实现方式

    本文目地:分析bootstrap导航栏及其响应式的实现方式,是自己的编程技术更上一层楼 我们首先来分析一下怎么实现,第一步先贴一个bootstrap的导航栏模板 2.代码如下 1 2 3 4 5 Toggle navigation 6 7 …

    2025年4月1日 编程技术
    100
  • Bootstrap媒体对象的详解

            本章我们将讲解 bootstrap 中的多媒体对象(media object)。这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实…

    编程技术 2025年4月1日
    100
  • Bootstrap洼地是什么?

    洼地(well):样式的效果和大屏幕展播jumbotron样式类似,不同点是well样式有了边框设置,并且默认高度是自适应文本的高度。 示例代码:     sorry I have no word to say   this is a 引用…

    编程技术 2025年4月1日
    100
  • Bootstrap面板的详细介绍

    1、面板 面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码: ☑ Less版本:对应的源码文件是 panels.less ☑ Sass版本:对应的…

    编程技术 2025年4月1日
    100
  • Bootstrap列表组的详细介绍

    本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下: 向元素 添加 class .list-group。 向 添加 class .list-group-item。 下面的实例演示了这点: 实…

    编程技术 2025年4月1日
    100
  • display:table,display:block用法区别

    我们都知道clearfix一般这么写: .clearfix:before,.clearfix:after{     content:””;     display:table; } .clearfix:after{clear:both;} …

    编程技术 2025年4月1日
    100

发表回复

登录后才能评论