日期:2014-05-17  浏览次数:20583 次

表格跨列时单元格的边框线问题
现在有如下样子的表格:
Name | Week1 | Week2 | Week3 |
------------------------------
| | |
------------------------------
| | |
|----|-----------------------|

Week1~Week3的表头是三列,但下面内容是跨3列的,每行里有一个div,占据100%的位置。HTML代码如下
HTML code

<table border=1>
<thead><tr><td>Name</td><td>Week1</td><td>Week2</td><td>Week3</td></tr></thead>
<tbody>
<tr><td>abc</td><td colspan=3><div id=div1 style="width:100%"/></td></tr>
<tr><td>def</td><td colspan=3><div id=div2 style="width:100%"/></td></tr>
</tbody>
</table>


现在我想要显示所有单元格之间边框(比如内容行里Week1和Week2之间),有没有什么办法?由于div必须放在对应的td里面,而且必须要占据3周宽,所以只能用跨列的方式来解决。

------解决方案--------------------
<style>
td{
border-style :solid;
border-width:thin;
}
span{
border-style :solid;
border-width:thin;
float:left;
border-top:0;
border-bottom:0;
border-left:0;
border-right-color:red;

}
</style>
<table >
<thead><tr><td>Name</td><td>Week1</td><td>Week2</td><td>Week3</td></tr></thead>
<tbody>
<tr><td>abc</td><td colspan=3><span > &nbsp;</span><div id=div1 style="width:100%"/></td></tr>
<tr><td>def</td><td colspan=3><div id=div2 style="width:100%"/></td></tr>
</tbody>
</table>
------解决方案--------------------
CSS+DIV 群号:62680534 欢迎对CSS+DIV感兴趣的加入
------解决方案--------------------
晕 搞这么麻烦
直接用DIV+CSS来布局,
用这个ul再指定宽度不就可以了吗?

不知道最终目的是什么

也不是很好说
------解决方案--------------------
在跨列的TD设置一个图片背景显示未设置跨列时的图片抓图.
不过不明白你为什么要这样?
------解决方案--------------------
你在<td colspan="3"> 里面放 3 个 div, div 宽高固定, 不行?
------解决方案--------------------
红线的部分你可以做一个table背景图。。。。。