jQuery写table布局样式

最新推荐文章于 2021-06-10 15:17:48 发布

yangtjh

最新推荐文章于 2021-06-10 15:17:48 发布

阅读量688

点赞数

分类专栏：前端笔记文章标签： jQuery-布局

本文链接：https://blog.csdn.net/yangtjh/article/details/51849900

版权

本文介绍了如何使用jQuery和HTML、CSS来实现table布局，解决了传统table中tr标签无法添加阴影效果的问题，通过li标签实现自定义样式。

摘要由CSDN通过智能技术生成

今天在写页面的时候出现了一个比较棘手的问题，，table样式，用table的话可以解决，但是都知道table里面的tr标签不可以添加阴影效果，所以我决定自己写一个table样式的布局，用li标签写，还是直接上货吧！

1、css样式

<style>
    *{margin:0;padding:0;}
    .js_list{width: 100%;height: 50px;list-style: none;}
    .js_list li{width:100%;float:left;height: 50px;border: 1px solid gray;line-height: 50px;}
    .js_list li:hover span{color: #2FA0EC;}
    .js_list li span{text-align: center;width:200px;float:left;}
</style>

HTML 代码

<ul class="table_list js_list">
<li class="topBox">
    <span data-name="1">1</span>
    <span data-name="1">2</span>
    <span data-name="5">3sdfsadf</span>
    <span data-name="3">4</span>
     <span data-name="5">3sdfsadf</span>
    <span data-name="3">4</span>