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
});
}
});
});
});
*注：一个小白的随笔，如有问题，希望各位大佬不吝指教
