|
查看效果 <style>
#table1{
width:613px;
}
.kui-table {
border: 1px dotted #ccc;
}
.kui-table .kui-td {
height:32px;
line-height:32px;
font-size: 12px;
border-color: #ccc;
border-style: dotted;
border-width: 0 0 1px 1px;
}
.kui-table .kui-td{
background-color:#fff;
}
.kui-table .kui-td span {
padding:0 4px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
width:100%;
}
.kui-table .kui-th,.kui-table .kui-td-rowno{
height:32px;
background-color: #efefef;
background: -webkit-linear-gradient(top,#F9F9F9 0,#efefef 100%);
background: -moz-linear-gradient(top,#F9F9F9 0,#efefef 100%);
background: -o-linear-gradient(top,#F9F9F9 0,#efefef 100%);
background: linear-gradient(to bottom,#F9F9F9 0,#efefef 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F9F9F9,endColorstr=#efefef,GradientType=0);
}
.kui-table .kui-tr.kui-odd,.kui-table .kui-tr.kui-odd .kui-td {
background: #fafafa;
}
.kui-table .kui-tr.kui-tr-selected .kui-td {
background: #ffe48d;
color: #000000;
}
.kui-table .kui-tr:not(.kui-tr-selected):hover .kui-td {
background: #eaf2ff;
color: #000000;
cursor: default;
}
.kui-table .kui-td-rowno{
text-align:center;
}
.kui-table .kui-td-checkbox span,.kui-table .kui-td-rowno span{
width:auto;/*让内容可以居中*/
}
</style>
<div id="table1" class="kui-table">
<div class="kui-tr">
<div class="kui-td kui-th kui-td-1" style="width: 50px; ">
<span>序号</span>
</div>
<div class="kui-td kui-th kui-td-2" style="width: 80px;">
<span>姓名</span>
</div>
<div class="kui-td kui-th kui-td-3" style="width: 80px;">
<span>性别</span>
</div>
<div class="kui-td kui-th kui-td-4" style="width: 150px;">
<span>联系电话</span>
</div>
<div class="kui-td kui-th kui-td-5" style="width: 250px;">
<span>地址</span>
</div>
</div>
<div class="kui-tr">
<div class="kui-td kui-td-rowno kui-td-1" style="width: 50px; ">
<span>1</span>
</div>
<div class="kui-td kui-td-2" style="width: 80px;">
<span>张三</span>
</div>
<div class="kui-td kui-td-3" style="width: 80px;">
<span>男</span>
</div>
<div class="kui-td kui-td-4" style="width: 150px;">
<span>13022222222</span>
</div>
<div class="kui-td kui-td-5" style="width: 250px;">
<span>浙江省杭州市区西湖区</span>
</div>
</div>
<div class="kui-tr">
<div class="kui-td kui-td-rowno kui-td-1" style="width: 50px; ">
<span>2</span>
</div>
<div class="kui-td kui-td-2" style="width: 80px;">
<span>李四</span>
</div>
<div class="kui-td kui-td-3" style="width: 80px;">
<span>男</span>
</div>
<div class="kui-td kui-td-4" style="width: 150px;">
<span>13033333333</span>
</div>
<div class="kui-td kui-td-5" style="width: 250px;">
<span>贵州省贵阳市南明区</span>
</div>
</div>
<div class="kui-tr">
<div class="kui-td kui-td-rowno kui-td-1" style="width: 50px; ">
<span>3</span>
</div>
<div class="kui-td kui-td-2" style="width: 80px;">
<span>王五</span>
</div>
<div class="kui-td kui-td-3" style="width: 80px;">
<span>女</span>
</div>
<div class="kui-td kui-td-4" style="width: 150px;">
<span>13055555555</span>
</div>
<div class="kui-td kui-td-5" style="width: 250px;">
<span>江苏省南京市玄武区</span>
</div>
</div>
<div class="kui-tr">
<div class="kui-td kui-td-rowno kui-td-1" style="width: 50px; ">
<span>4</span>
</div>
<div class="kui-td kui-td-2" style="width: 80px;">
<span>赵六</span>
</div>
<div class="kui-td kui-td-3" style="width: 80px;">
<span>男</span>
</div>
<div class="kui-td kui-td-4" style="width: 150px;">
<span>13066666666</span>
</div>
<div class="kui-td kui-td-5" style="width: 250px;">
<span>江苏省南京市玄武区</span>
</div>
</div>
</div>
<script>
$(function(){
$k('#table1').table();
});
</script>
|
