table内容超长自动隐藏，鼠标放置后浮动显示全部内容

最新推荐文章于 2025-05-08 15:12:02 发布

凉茶冰

最新推荐文章于 2025-05-08 15:12:02 发布

阅读量7.2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css js

本文链接：https://blog.youkuaiyun.com/liangcha007/article/details/87597210

前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种前端开发中处理表格布局的问题解决方案，通过限制单元格宽度并采用特殊样式处理长内容，实现美观且实用的表格展示，同时探讨了rem单位在响应式设计中的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

解决思路

问题描述

有的时候table作为列表展示记录信息的时候，偶尔会出现某一列数据某一些记录内容变的很长，默认如果没有设置td的宽度话，那界面的样式就丑到爆炸，例如如下这种情况，上一页是正常显示的，第三列的内容长度都差不多，但是第二页的时候，整个样式就完全错乱了，因为第三列存在某些记录的内容太长了。

再点击下一页，显示如下:

这显然是不合适的展示方式。

解决思路

可以比较直观想到的几种种结局方案，如下：

1.第一种是把内容容易边长的一列不显示到列表，在详情展示，这可以解决该问题，但是不能根治，而且有局限性，万一需求就是要求这一列展示到列表中呢？

2.后端进行配合，列表接口中对这一列的数据直接进行截取，超多M个字就省略后面的，并添加...结尾，然后再返回前端去展示。这种方案可以在前端不调整的情况下，直接满足要求，但是也有很大局限性和不足。这样返回的数据，被截取的那一列数据在列表中无法看到完整信息，必须有详情页面，但是假如说，本身列表就没几个字段，这时候再做详情页就略显麻烦，还有一个不足在于，这种问题需要后端配合，还要升级版本，对项目的稳定不太好。

3.前端进行处理，限定每一列的宽度，对于内容不确定可能会变长撑乱结构的那一列数据进行特殊样式处理，超出多少长度或者多少个字的时候自动隐藏，鼠标移动到该td时，会自动浮动出全部信息。完全通过前端的css/js来时限。

综上所述，第三种方案相对来说是比较好的解决思路。

相关代码

1.限定td的宽度

function getTableHtml(index, data, page) {
    var tmp = '<tr>' +
        '<th scope="row">' + (index + 1 + ((page - 1) * 10)) + '</th>' +
        '<td  style="width: 7.5rem;vertical-align: center;">' + valueFilter(data.u_name) + '</td>' +
        '<td  style="width: 5.5rem;vertical-align: center;">' + valueFilter(data.sex) + '</td>' +
        '<td  style="width: 5.5rem;">' + valueFilter(data.age) + '</td>' +
        '<td>' + filterComplaint(data.chief_complaint) + '</td>' +
        '<td  style="width: 14rem;">' + data.add_time + '</td>' +
        '<td style="width: 15rem;">' +
        '<a class="detail-button" href="addmedicsub.html?medic_id=' + data.medic_id + '&mid=' + data.id + '"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>&nbsp;&nbsp;&nbsp;' +
        '<a class="detail-button" href="javascript:delFun(' + data.id + ');"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除</a>&nbsp;&nbsp;&nbsp;' +
        "<a class='detail-button' href='javascript:showDetail(" + JSON.stringify(data) + ");'>" + '<span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>详情</a>' +
        '</td></tr>';
    return tmp;
}

注：对需要要进行特殊截取处理的列不限制宽度，其他列都指定具体宽度。

2.内容特殊处理

function filterComplaint(v) {
    var rstr = '无';
    if (strIsEmpty(v)) {
        return '无';
    } else {
        rstr = '<div class="MHover">' + v + '</div>' +
            '<div class="MALL">' + v + '</div>';
    }
    return rstr;
}

3.全局指定动态指定css样式

function bindClass() {
    $(".MALL").hide();
    $(".MHover").mouseover(function (e) {
        $(this).next(".MALL").css({"position":"absolute","top":e.pageY-150,"left":e.pageX}).show();
    });
    $(".MHover").mousemove(function (e) {
        $(this).next(".MALL").css({ "color": "#FFFFFF","z-index":"1000","width":"45rem","padding":"1.3rem","line-height":": 1rem", "position": "absolute", "opacity": "1", "background-color": "#9F7C5C", "top": e.pageY-155, "left": e.pageX });
    });
    $(".MHover").mouseout(function () {
        $(this).next(".MALL").hide();
    });
}

前面两个都非常简单，最关键的代码就在于bindClass方法，通过对样式的鼠标事件进行绑定，来处理鼠标移入和移出时的样式，通过绝对定位，指定浮动层的位置和大小，方法bindClass在生成table的dom后进行调用，否则不生效。

4.效果如下

延伸

在指定td的宽度的时候，我使用的rem，这里也建议前端的开发在尽量使用rem em代替px，rem使一个相对单位，是相对于根元素<html>的font-size，所以，他不是一个固定的值。rem集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

rem是css3新增的一个相对长度单位，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem出现就可以解决这样的问题，rem只相对于根目录，即HTML元素。所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局