<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>
前端开发之div实现table表格系列教程一:创建表格
最新推荐文章于 2024-05-13 01:52:35 发布