Question

html css div table border属性设置

一个table表
两行两列.边框宽度2px
第一行
合并成一个单元格
第二行
左边单元格,没有右边框.

右边单元格,没有做边框.

请给出具体实现代码,就是那种直接复制+粘贴就可以用的的
谢谢!

Answer 1

<style type="text/css">
<!--
.table1 { width:500px;height:62px;border:2px solid #99cc00;}
#s1{
 width:500px;
 height:30px;
 text-align: center;
 vertical-align: middle;
 background-color: #CCCCCC;
 border-bottom-width: 2px;
 border-bottom-color: #99cc00;
 border-bottom-style: solid;
} 
#s2{
 width:250px;
 height:30px;
 border-bottom-color: #99cc00;
 float: left;
 background-color: #FFFFCC;

}
#s3{
 width:250px;
 height:30px;
 float: left;
 background-color: #FFCCFF;

}
-->
</style>
   <div class="table1">
<div id="s1">第一行合并成一个单元格</div>

<div > 

<div id="s2">左边单元格，没有右边框.</div>
<div id="s3">右边单元格，没有左边框.</div>

</div>
</div>

<br>===================第二种方法======================<br><br>

 

 

<TABLE width="500" height="76" style=" BORDER: #99cc00 2px solid ;"   >
<TBODY>
<TR><TD  colspan="2" bgcolor="#CCCCCC" style="border-bottom:#99CC00 2px solid;" >第一行合并成一个单元格</TD>
</TR>
<TR><TD bgcolor="#FFFFCC">左边单元格，没有右边框.</TD><TD bgcolor="#FFCCFF">右边单元格，没有左边框.</TD></TR>
</TBODY>
</TABLE>

Answer 2

只有外围框
<table width="200" border="0" cellpadding="0" cellspacing="0" style="border:2px red solid">
<tr>
<td colspan="2">ffffffff</td>
</tr>
<tr>
<td>fffff</td>
<td>fffffffff</td>
</tr>
</table>
<div style="border:2px red solid; width:200px;">
<div style=" height:20px">ffffffff</div>
<ul style="clear:both; overflow:hidden">
<li style="width:50%; float:left">ffffffff</li>
<li style="width:50%; float:left">ffffffff</li>
</ul>
<div style="clear:both; height:0; width:100%; overflow:hidden"></div>
</div>
或
<div style="border:2px red solid; width:200px;">
<div style=" height:20px">ffffffff</div>
<div style="width:50%; float:left">ffffffff</div>
<div style="width:50%; float:left">ffffffff</div>
<div style="clear:both; height:0; width:100%; overflow:hidden"></div>
</div>

内外边框
<table width="200" border="0" cellpadding="0" cellspacing="1" bgcolor="red">
<tr>
<td colspan="2" bgcolor="white">ffffffff</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">fffff</td>
<td bgcolor="#FFFFFF">fffffffff</td>
</tr>
</table>
<div style="border:1px red solid; width:200px;">
<div style="height:20px; border-bottom:1px red solid">ffffffff</div>
<div style="width:98px; float:left; border-bottom:1px red solid; border-right:1px red solid">ffffffff</div>
<div style="width:99px; float:left;border-bottom:1px red solid;">ffffffff</div>
<div style="clear:both; height:0; width:100%; overflow:hidden"></div>
</div>

Answer 3

<table border="1" cellpadding="0" cellspacing="0" style="border-width:2px; border-collapse:collapse;">
<tr>
<td colspan="2">第一行合并成一个单元格</td>
</tr>
<tr>
<td>左边单元格</td>
<td>右边单元格</td>
</tr>
</table>

Answer 4

最简单就是用DW 在设计功能下直接插入一个表格然后把你想合并的合并 这时候你回到代码就是这个代码了

Answer 5

<table border rules="rows">
<tr>
<td colspan="2">ddddddd</td>
</tr>
<tr>
<td>dd</td>
<td>dd</td>
</tr>
</table>