表格跨列时单元格的边框线问题

[blackcatiii]

现在有如下样子的表格：
Name | Week1 | Week2 | Week3 |
------------------------------
| | |
------------------------------
| | |
|----|-----------------------|

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

<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周宽，所以只能用跨列的方式来解决。

[my_web]

<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 >  </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>

[blackcatiii]

楼上的兄弟，你的方法没办法实现我的要求。可能我没说明白，我想要的是让表格显示成没有跨列时的样子，

<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> </td><td> </td><td> </td></tr>
<tr><td>def</td><td> </td><td> </td><td> </td></tr>
</tbody>
</table>

但是因为Week对应的3列是等宽的，而且要包含一个div，而这个div是跨3周的，所以宽度等于3倍的td，我如果放在一个td里的话会把这个td撑得很大，不符合等宽的要求，所以只好用colspan=3来合并单元格，但这样一来，单元格中间的边框线就没了，怎么能既合并单元格又能显示原来单元格的边框？

[blackcatiii]

我想如果能用两个表格叠加，一个是有单元格边框线的，一个是合并单元格的，然后把前者叠放到后者之上，这样也许能实现我的想法，但是没什么思路能做到这点，大家给点建议吧。

[gxgxy98]

CSS+DIV 群号:62680534 欢迎对CSS+DIV感兴趣的加入

[sjmlsxp]

晕 搞这么麻烦
直接用DIV+CSS来布局，
用这个ul再指定宽度不就可以了吗？

不知道最终目的是什么

也不是很好说

[myvicy]

在跨列的TD设置一个图片背景显示未设置跨列时的图片抓图.
不过不明白你为什么要这样?

[blackcatiii]

多谢二位的参与，我是想做个WEB版的Project界面，里面牵涉到活动的日程安排，要求类似于outlook的calendar，按周或者月显示所有活动，具体界面如下：

我现在想做的是如何能实现图中的红线部分

闲水小鱼说的不容易实现，因为我还得对齐宽和高，而且用DIV的方式没法加每周的单元格边框；微尘说的也不行，因为这个界面还可能会被缩放，一旦缩放了，图片背景就很容易错位。

请大家继续想想办法，谢谢。

[jamo]

你在<td colspan="3"> 里面放 3 个 div， div 宽高固定， 不行？

[blackcatiii]

to jamo：
谢谢你的建议，不过不行的，因为colspan=3就表示单元格合并了，自然没有单元格边框了，因为我的DIV要填充100%的宽度，否则我没法在里面放不同时间范围的活动，因此加3个DIV没有任何意义。

[wdbjsh]

红线的部分你可以做一个table背景图。。。。。

[myvicy]

因为这个界面还可能会被缩放
table和div的宽度的都不固定的吗?
那就用层重叠,并且用js动态来控制宽度.

[blackcatiii]

层重叠，那样得用绝对定位方式，可是我的表格的大框架是没有任何定位的，因为表格上面还有别的高度可能会变化的东西，不知道能否改得起来。

[kinghome]

给你的 单元格 写个样式 不行吗
style="border: 1px solid #000000;"