jQuery写table布局样式

今天在写页面的时候出现了一个比较棘手的问题，，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>