最新公告
  • 欢迎您光临AA分享网,一个高级程序员的学习、分享的分享平台!立即加入我们
  • bootstrap如何实现table表格超过长度不显示

    本文环境:windows10、bootstrap3.3.7,本文适用于所有品牌的电脑。

    当表格里面的内容列数过多的,内容长度过长的时候,会出现自动换行的效果,整个表格的每一行高度就不相同了,看上去就不够美观。

    参考demo如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>bootstrap-table表格超过长度自动省略</title>
            <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
            <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
            <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
            <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
            <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
        </head>
        <body>
          
            <table id="mytab" class="table table-hover"  style="width: 400px;"></table>
            <script>
                $('#mytab').bootstrapTable({
                    method: 'get',
                    url: "data.json", // 请求路径
                    striped: true, // 是否显示行间隔色
                    pageNumber: 1, // 初始化加载第一页
                    pagination: true, // 是否分页
                    sidePagination: 'client', // server:服务器端分页|client:前端分页
                    pageSize: 5, // 单页记录数
                    pageList: [5, 20, 30],
                    
                    queryParams: function(params) { // 上传服务器的参数
                        var temp = {
                            name: $("#sname").val(),
                            viewReason: $("#viewReason").val(),
                        };
                        return temp;
                    },
                    columns: [{
                        checkbox: true
                    }, {
                        title: 'id',
                        field: 'id',
                        visible: false
                    }, {
                        title: '设备编号',
                        field: 'deviceId',
     
                    }, {
                        title: '姓名',
                        field: 'name',
     
                    }, {
                        title: '证件号码',
                        cellStyle: formatTableUnit,
                        formatter: paramsMatter,
                        field: 'card'
                    }]
                })
     
                //表格超出宽度鼠标悬停显示td内容
                function paramsMatter(value, row, index) {
                    var span = document.createElement("span");
                    span.setAttribute("title", value);
                    span.innerHTML = value;
                    return span.outerHTML;
                }
                //td宽度以及内容超过宽度隐藏
                function formatTableUnit(value, row, index) {
                    return {
                        css: {
                            "white-space": "nowrap",
                            "text-overflow": "ellipsis",
                            "overflow": "hidden",
                            "max-width": "60px"
                        }
                    }
                }         
            </script>
        </body>
    </html>

    参考的json数据

    [
        {
            "id": 139,
            "deviceId": "3",
            "name": "王小婷",        
            "card": "12354765787798745677"
            
        }, {
            "id": 139,
            "deviceId": "3",
            "name": "祈澈菇凉",        
            "card": "3408231998918484"
        },{
           "id": 139,
            "deviceId": "3",
            "name": "小飞侠",        
            "card": "340823199823545"
        },{
             "id": 139,
            "deviceId": "3",
            "name": "肖战",        
            "card": "340823199853467"
        },{
             "id": 139,
            "deviceId": "3",
            "name": "王一博",        
            "card": "34082319983563456"
        }, {
             "id": 139,
            "deviceId": "3",
            "name": "肖战",        
            "card": "34082319983252"
        }
    ]

    修改之后的效果就是这样的,如果超出宽度就会自动省略超过的部分,鼠标放在上面的时候,会将全部的内容显示出来。

    214511cbf04f6c88779b37be7b2cd5c.png

    以上就是bootstrap如何实现table表格超过长度不显示的详细内容,更多请关注其它相关文章!

    AA分享网一个高级程序员的学习、分享的IT资源分享平台
    AA分享网-企业网站源码-PHP源码-网站模板-视频教程-IT技术教程 » bootstrap如何实现table表格超过长度不显示
    • 257会员总数(位)
    • 5897资源总数(个)
    • 8本周发布(个)
    • 0 今日发布(个)
    • 538稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情