【html】斑马线表格

源于 how2j教程，这是个特别好的java网站。

实现效果如下。

<style>
table{
border-collapse:collapse; /*边框合并*/
width:90%;
}
tr.odd{ 	/*表格的奇数列的样式*/
background-color:#f8f8f8; 
}
tr.head{ 	/*表头的下边框*/
border-bottom-width: 2px;
}
tr{
border-bottom-style: solid; 	/*底部为实线*/
border-bottom-width: 1px;		/*底部宽度为1px*/
border-bottom-color: lightgray; /*底部颜色*/
height:35px;	/*高度为35px*/
}

td{
width:25%;
text-align:center; /*文字居中*/
}
 
</style>
<table>
   <tr class="head">
       <td>id</td>
       <td>名称</td>
       <td>血量</td>
       <td>伤害</td>
    </tr>
   <tr class="odd">
       <td>1</td>
       <td>gareen</td>
       <td>340</td>
       <td>58</td>
    </tr>
   <tr class="even">
       <td>2</td>
       <td>teemo</td>
       <td>320</td>
       <td>76</td>
    </tr>
   <tr class="odd">
       <td>3</td>
       <td>annie</td>
       <td>380</td>
       <td>38</td>
    </tr>
   <tr class="even">
       <td>4</td>
       <td>deadbrother</td>
       <td>400</td>
       <td>90</td>
    </tr>
</table>

• 点赞
• 收藏
• 分享
• • 文章举报

振宇振宇 发布了114 篇原创文章 · 获赞 17 · 访问量 8341 私信 关注

标签：35px,斑马线,表格,bottom,color,tr,width,html,border
来源： https://blog.csdn.net/weixin_43734095/article/details/104055520