Top

表格

所有表格元素都可以使用左侧导航的所有class类进行细节样式的调整

(1) 只有竖向分界线的表格

编号 姓名 电话 QQ
表格底部注释1 表格底部注释2 表格底部注释3 表格底部注释4
1 小三 150****0487 35745784
2 小四 135****1246 1490933
3 小五 150****0899 7954511 
 
HTML代码:

<table class="dsure-table">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>电话</th>
            <th>QQ</th>
        </tr>
    </thead>
    
    <tfoot>
        <tr>
            <th>表格底部注释1</th>
            <th>表格底部注释2</th>
            <th>表格底部注释3</th>
            <th>表格底部注释4</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>1</td>
            <td>小三</td>
            <td>150****0487</td>
            <td>35745784</td>
        </tr>

        <tr>
            <td>2</td>
            <td>小四</td>
            <td>135****1246</td>
            <td>1490933</td>
        </tr>

        <tr>
            <td>3</td>
            <td>小五</td>
            <td>150****0899</td>
            <td>7954511</td>
        </tr>
    </tbody>
</table>

(2) 只有横向分界线的表格

编号 姓名 电话 QQ
1 小三 150****0487 35745784
2 小四 135****1246 1490933
3 小五 150****0899 7954511 
 
HTML代码:

<table class="dsure-table dsure-table-horizontal">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>电话</th>
            <th>QQ</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>小三</td>
            <td>150****0487</td>
            <td>35745784</td>
        </tr>

        <tr>
            <td>2</td>
            <td>小四</td>
            <td>135****1246</td>
            <td>1490933</td>
        </tr>

        <tr>
            <td>3</td>
            <td>小五</td>
            <td>150****0899</td>
            <td>7954511</td>
        </tr>
    </tbody>
</table>

(3) 带横竖分界线的表格

编号 姓名 电话 QQ
1 小三 150****0487 35745784
2 小四 135****1246 1490933
3 小五 150****0899 7954511 
 
HTML代码:

<table class="dsure-table dsure-table-bordered">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>电话</th>
            <th>QQ</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>小三</td>
            <td>150****0487</td>
            <td>35745784</td>
        </tr>

        <tr>
            <td>2</td>
            <td>小四</td>
            <td>135****1246</td>
            <td>1490933</td>
        </tr>

        <tr>
            <td>3</td>
            <td>小五</td>
            <td>150****0899</td>
            <td>7954511</td>
        </tr>
    </tbody>
</table>

(4) 有奇偶交替色的表格

编号 姓名 电话 QQ
1 小三 150****0487 35745784
2 小四 135****1246 1490933
3 小五 150****0899 7954511 
 
HTML代码:

<table class="dsure-table dsure-table-horizontal">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>电话</th>
            <th>QQ</th>
        </tr>
    </thead>

    <tbody>
        <tr class="dsure-table-odd">
            <td>1</td>
            <td>小三</td>
            <td>150****0487</td>
            <td>35745784</td>
        </tr>

        <tr>
            <td>2</td>
            <td>小四</td>
            <td>135****1246</td>
            <td>1490933</td>
        </tr>

        <tr class="dsure-table-odd">
            <td>3</td>
            <td>小五</td>
            <td>150****0899</td>
            <td>7954511</td>
        </tr>
    </tbody>
</table>

(5) 只有竖向分界线(且无外边框)的表格

用于一些特殊的列表展示1 内容详细信息1 备注信息1
用于一些特殊的列表展示2 内容详细信息2 备注信息2
用于一些特殊的列表展示3 内容详细信息3 备注信息3 
 
HTML代码:

<table class="dsure-table dsure-table-noborder">

     <tbody>
        <tr>
            <td class="dsure-table-left-noborder">用于一些特殊的列表展示1</td>
            <td>内容详细信息1</td>
            <td>备注信息1</td>
        </tr>
        
        <tr>
            <td class="dsure-table-left-noborder">用于一些特殊的列表展示2</td>
            <td>内容详细信息2</td>
            <td>备注信息2</td>
        </tr>
        
        <tr>
            <td class="dsure-table-left-noborder">用于一些特殊的列表展示3</td>
            <td>内容详细信息3</td>
            <td>备注信息3</td>
        </tr>
    </tbody>
        
</table>

(6) 只有横向分界线(且无外边框)的表格

用于一些特殊的列表展示1 内容详细信息1 备注信息1
用于一些特殊的列表展示2 内容详细信息2 备注信息2
用于一些特殊的列表展示3 内容详细信息3 备注信息3 
 
HTML代码:

<table class="dsure-table dsure-table-noborder dsure-table-horizontal">

     <tbody>
        <tr>
            <td>用于一些特殊的列表展示1</td>
            <td>内容详细信息1</td>
            <td>备注信息1</td>
        </tr>
        
        <tr>
            <td>用于一些特殊的列表展示2</td>
            <td>内容详细信息2</td>
            <td>备注信息2</td>
        </tr>
        
        <tr class="dsure-table-bottom-noborder">
            <td>用于一些特殊的列表展示3</td>
            <td>内容详细信息3</td>
            <td>备注信息3</td>
        </tr>
    </tbody>
        
</table>

(7) 文字对齐自由控制的表格

编号 姓名 电话
此行居中 此行居左 此行居右
项目标题1居中 项目标题2居中 项目标题3居中
内容... 内容... 内容...
项目标题1居中 项目标题2居中 项目标题3居中
内容1居中 内容2居中 内容3居中 
 
HTML代码:

<table class="dsure-table dsure-table-bordered" style="width:100%">
    <thead>
        <tr>
            <th style="width:33.3%">编号</th>
            <th style="width:33.3%">姓名</th>
            <th style="width:33.3%">电话</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td class="dsure-table-t-center">此行居中</td>
            <td class="dsure-table-t-left">此行居左</td>
            <td class="dsure-table-t-right">此行居右</td>
        </tr>

    </tbody>
</table>



<table class="dsure-table dsure-table-bordered" style="width:100%">
    <thead class="dsure-table-t-center">
        <tr>
            <th style="width:33.3%">项目标题1居中</th>
            <th style="width:33.3%">项目标题2居中</th>
            <th style="width:33.3%">项目标题3居中</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td>内容...</td>
            <td>内容...</td>
            <td>内容...</td>
        </tr>

    </tbody>
</table>


<table class="dsure-table dsure-table-bordered" style="width:100%">
    <thead>
        <tr>
            <th style="width:33.3%"  class="dsure-table-t-center">项目标题1居中</th>
            <th style="width:33.3%"  class="dsure-table-t-center">项目标题2居中</th>
            <th style="width:33.3%"  class="dsure-table-t-center">项目标题3居中</th>
        </tr>
    </thead>

    <tbody class="dsure-table-t-center">

        <tr>
            <td>内容1居中</td>
            <td>内容2居中</td>
            <td>内容3居中</td>
        </tr>

    </tbody>
</table>

(8) 自定义表格行色彩

在<tr>标签上设置样式dsure-no-hover dsure-bg-black f-c-white或者dsure-no-hover dsure-bg-silver f-c-black
其中形如.dsure-bg-???的样式是你要叠加的色彩，参考左侧导航

编号 姓名 电话
内容... 内容... 内容... 
 
HTML代码:

<table class="dsure-table dsure-table-bordered">
    <thead>
        <tr class="dsure-no-hover dsure-bg-black f-c-white">
            <th>编号</th>
            <th>姓名</th>
            <th>电话</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td>内容...</td>
            <td>内容...</td>
            <td>内容...</td>
        </tr>

    </tbody>
</table>

(9) 表格合并

编号 姓名 电话 QQ
3 小五 150****0899 7954511
横向合并2单位 横向合并2单位 
 
HTML代码:

<table class="dsure-table dsure-table-bordered">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>电话</th>
            <th>QQ</th>
        </tr>
    </thead>
    
    <tbody>

        <tr>
            <td>3</td>
            <td>小五</td>
            <td>150****0899</td>
            <td>7954511</td>
        </tr>
        
        <tr>
            <td colspan="2">横向合并2单位</td>
            <td colspan="2">横向合并2单位</td>
        </tr>
        
    </tbody>

</table>