//引入的依賴
<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
});
}
});
});
});
*注：一個小白的隨筆，如有問題，希望各位大佬不吝指教