表格 - 页面元素

在一个 <table> 容器中设定 class="layui-table" 来渲染一个表格元素块,通过内置的自定义属性对表格进行风格的多样化设定。
默认表格
昵称 加入时间 签名
贤心 2016-11-29 人生就像是一场修行
许闲心 2016-11-28 于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…
sentsin 2016-11-27 Life is either a daring adventure or nothing.
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>昵称</th>
      <th>加入时间</th>
      <th>签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行</td>
    </tr>
    <tr>
      <td>贤心</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行</td>
    </tr>
  </tbody>
</table>
      
基础属性

设定以下基础属性,可定义不同风格的表格样式:

属性名 属性值 备注
lay-even 用于开启 偶数行 背景,可与其它属性一起使用
lay-skin="属性值" line/row/nob line:定义行边框 风格表格
row:定义列边框 风格表格
nob:定义 无边框 风格表格
行边框表格
昵称 加入时间 签名
贤心 2016-11-29 人生就像是一场修行
贤心 2016-11-29 人生就像是一场修行
贤心 2016-11-29 人生就像是一场修行
<table class="layui-table" lay-skin="line">
  内部结构一样
</table>
      
列边框表格
昵称 加入时间 签名
贤心 2016-11-29 人生就像是一场修行
贤心 2016-11-29 人生就像是一场修行
贤心 2016-11-29 人生就像是一场修行
<table class="layui-table" lay-skin="row">
  内部结构一样
</table>
      
无边框表格
昵称 加入时间 签名
贤心 2016-11-29 人生就像是一场修行
贤心 2016-11-29 人生就像是一场修行
贤心 2016-11-29 人生就像是一场修行
<table class="layui-table" lay-even lay-skin="nob">
  内部结构一样
</table>
      
结语

该表单元素只为对原始table元素进行一些修饰,并不提供排序、数据交互等功能性操作(layTable模块将会对其进行支持)。

Layui - 用心与你沟通