表格table的设计

最新推荐文章于 2023-06-04 18:17:49 发布

weixin_34217711

最新推荐文章于 2023-06-04 18:17:49 发布

阅读量151

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/owengao/blog/266693

版权

2019独角兽企业重金招聘Python工程师标准>>>

表格table的设计

表格table边框颜色===表格外层div的背景颜色

当div自己的内边距padding:1px;的时候,凸显出了div的背景颜色

<div class="tableBorderColor" style="padding:1px;">

单元格td的边框颜色===表格table的背景颜色

当单元格的cellspacing="1"时,单元格之间的间距是1px,所以凸显出了table的背景颜色

<table border="0" width="100%" cellpadding="3" cellspacing="1" class="tdBorderColor">

CSS属性

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr").attr("bgcolor","#fff");
$("tr").attr("align","center");
$("tr:even").css("background-color", "#E9F3FF");
});
</script>
<style type="text/css">
.clear{ clear:both;}
.tableBorderColor{ background-color:#79B2F1;}
.tdBorderColor{ background-color:#5C99DC;}
.white{ background-color:#fff;}
.table_title{ width:120px; height:22px; font-size:12px; text-align:center; line-height:22px; margin:0 auto; border:1px solid #79B2F1; border-bottom:none;}
</style>

表格设计代码

<div class="table_title">表格的标题</div>
<div class="tableBorderColor" style="padding:1px;">
<table border="0" width="100%" cellpadding="3" cellspacing="1" class="tdBorderColor">
    <tr>
        <td>学号</td><td>姓名</td><td>性别</td><td>年龄</td>
    </tr>
    <tr>
        <td>12</td><td>张三</td><td>男</td><td>23</td>
    </tr>
    <tr>
        <td>16</td><td>李四</td><td>男</td><td>25</td>
    </tr>
    <tr>
        <td>15</td><td>王五</td><td>男</td><td>65</td>
    </tr>
</table>
</div>

转载于:https://my.oschina.net/owengao/blog/266693