jQuery写table布局样式

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

yangtjh

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

阅读量714

点赞数

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

本文链接：https://blog.youkuaiyun.com/yangtjh/article/details/51849900

版权

前端笔记专栏收录该内容

4 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在写页面的时候出现了一个比较棘手的问题，，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>
    <span data-name="5">asdfnnnnnnnnnnnnnnnnasdfs1</span>
    <span data-name="5">2yuytututyutyutyutyu</span>
    <span data-name="4">3fasdf</span>
    <span data-name="5">4</span>
</li>
<li>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>1</span>
    <span>2dafasdfa</span>
    <span>3</span>
    <span>4</span>
</li>
<li>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>1</span>
    <span>2dafasdfa</span>
    <span>3</span>
    <span>4</span>
</li>

js部分

<script type="text/javascript"     src="http://static.ilongyuan.cn/cdn/script/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var a = 0 ;
var _this = ".js_list li:first span";
$(_this).each(function(){
var w = $(this).attr("data-name");
a = (a+w*1);
});
$(_this).each(function(i){
$(".js_list li").each(function(b){
    //alert(b)
    var c = ($(".js_list").width()-2)/a;
    $(".js_list li:eq("+b+") span:eq("+i+")").width(c*$(_this+":eq("+i+")").attr('data-name'));
});
//return false;
});
</script>