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>