首页 > 其他 > 详细

bootstrap之table列内容超出部分省略号

时间:2019-03-01 10:12:26      阅读:342      评论:0      收藏:0      [点我收藏+]

想让bootstrap的table列内容超出部分省略号,要在table上加table-layout:fixedword-break:break-all

然后在头部thead的th加上宽度百分比,最后在列里加个标签如span,

在这个span加上单行超出部分省略号的css:display: inline-block,overflow: hidden,white-space: nowrap,text-overflow:ellipsis即可

效果图:

HTML代码如下:

<table class="data-table table table-bordered table-hover table-responsive">
            <thead>
                <tr>
                    <th width="5%">序号</th>
                    <th width="25%">活动主题</th>
                    <th width="25%">营销内容</th>
                    <th width="15%">营销时间</th>
                    <th width="10%">创建者</th>
                    <th width="20%">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td data-class="xd-table-th"><span title="五一大放送">五一大放送</span></td>
                    <td data-class="xd-table-th"><span title="五一大放送,全场五折起">五一大放送,全场五折起</span></td>
                    <td><span title="2019-02-28">2019-02-28</span></td>
                    <td><span title="Jwen">Jwen</span></td>
                    <td>
                        <a href="javascript:void(0);">编辑</a>
                        <a href="javascript:void(0);">删除</a>
                        <a href="javascript:void(0);">查看效果</a>
                    </td>
                </tr>
            </tbody>
        </table>

css代码如下:

table{
    text-align:center;
    table-layout:fixed;
    word-break:break-all;
}

table td>span{
    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

 

bootstrap之table列内容超出部分省略号

原文:https://www.cnblogs.com/zzwlong/p/10454733.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!