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

                        });

                    }

                });

            });

});

*注：一個小白的隨筆，若有問題，但願各位大佬不吝指教