layui table 的一些用法

//引入的依赖

<script type="text/javascript" src="/lib/js/jquery.js"></script>
<script type="text/javascript" src="/lib/layui/layui.js"></script>
<link rel="stylesheet" href="/lib/layui/css/layui.css">
<link rel="stylesheet" href="/lib/css/base.css">
<link rel="stylesheet" href="/lib/css/langmu.css">

//css文件

<style>
.layui-nav-tree .layui-nav-child .active, .layui-nav-tree .layui-nav-child dd:hover
{
background: #0695ff;
}
table {
text-align: center;
table-layout: fixed;//table表格中内容超出时不会改变单元格固定宽度
}

//table中th中文字居中
table th{
text-align: center !important;//“!important”做用是提升指定样式规则的应用优先权

}

//table中内容超过td宽度的隐藏显示为...

table td{
word-break:break-all
　　word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一块儿使用。*/
}

//角标（如：按钮上提示用的小圆点）
.layui-badge-dot{

position: absolute;//相对拥有“position: relative”css属性的标签订位
top: -3px;
left: 57px;
z-index: 99999;
}
</style>

//table表格代码

<table style="font-size:12px;" border="1" class="layui-table" cellspacing="0">

<tr>

<th width="160px">字段1</th>

<th width="100px">字段2</th>

<th width="60px">字段3</th>

<th width="90px">字段4</th>

<th width="150px">字段5</th>

<th width="45px">字段6</th>

<th width="70px">字段7</th>

<th width="265px">操做</th>

</tr>

 

<tr>

<td>td内容td内容td内容</td>

<td>td内容td内容td内容</td>

<td>td内容td内容td内容</td>

<td>td内容td内容td内容</td>

<td>td内容td内容td内容</td>

<td>td内容td内容td内容td内容</td>

 

<td>

<a href="路径"

class="layui-btn layui-btn-normal layui-btn-sm"

style="position: relative" >操做<span 

class="layui-badge-dot"></span><a>

</td>

</tr>

 

 

</table>

<script type="text/javascript">

 

 

 

        layui.use(['laypage'], function () {

            var laypage = layui.laypage

　　　　//显示被隐藏的太多内容

            $(function () {

                $("td").on("mouseenter",function() {

                    if (this.offsetWidth < this.scrollWidth) {

                        var that = this;

                        var text = $(this).text();

                        layer.tips(

                          '<span style="word-break:break-all">'+text+'</span>'

                        , that,{

                            tips: 1,

                            time: 2000

                        });

                    }

                });

            });

});

*注：一个小白的随笔，若有问题，但愿各位大佬不吝指教