1. 爱易网页
  2. HTML教程
  3. 怎么让单元格边框合并在一起

怎么让单元格边框合并在一起

日期：2014-05-16　 浏览次数：21066 次

如何让单元格边框合并在一起
<style type="text/css">
.aaa{text-align:center;}
.bbb{text-align:right;}
.ccc{border-style:solid;}
.ddd{text-align:left}
td ,th{border:1px solid black;}
table{border-collapse:collapse;
border:1px solid black;}

</style>
<body>
<table >
<tr class="ddd">
<th colspan="7"> 报价日期：2007年7月10日</th>
</tr>
<tr class="aaa">
<th colspan="7" >某城市房地产信息中心第(7)期报价数据</th></tr>

<tr >
<th ></th>
<th></th>
<th></th>
<th colspan="2">本期</th>
<th colspan="2" >上期</th>
</tr>
<tr >
<th>分类</th>
    <th>商品名称</th>
    <th>单位</th>
    <th>最高单价</th>
    <th>集中成交价</th>
    <th>最高成交价</th>
    <th>集中成交价</th>
</tr>
<tr >
<td rowspan="3">商品楼</td>
    <td class="ddd">城市中心地段</td>
    <td>元/平方米</td>
    <td class="bbb">10846</td>
    <td class="bbb">9750</td>
    <td class="bbb">12475</td>
    <td class="bbb">11000</td>
</tr>
<tr >
    <td class="ddd">城市一般地段</td>
    <td>元/平方米</td>
    <td class="bbb">7416</td>
    <td class="bbb">6900</td>
    <td class="bbb">7749</td>
    <td class="bbb">6900</td>
</tr>
<tr >
    <td class="ddd">城市近郊地段</td>
    <td>元/平方米</td>
    <td class="bbb">7819</td>
    <td class="bbb">6700</td>
    <td class="bbb">7166</td>
    <td class="bbb">6500</td>
</tr>

------解决方案--------------------
其实border-collapse:collapse; 已经合并，如下
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="textml; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

.aaa{text-align:center;}

.bbb{text-align:right;}

.ccc{border-style:solid;}

.ddd{text-align:left}

td ,th{border:1px solid black;}

table{border-collapse:collapse;}

</style>



</head>



<body>

<table >

<tr class="ddd">

<th colspan="7"> 报价日期：2007年7月10日</th>

</tr>

<tr class="aaa">

<th colspan="7" >某城市房地产信息中心第(7)期报价数据</th></tr>



<tr >

<th ></th>

<th></th>

<th></th>

<th colspan="2">本期</th>

<th colspan="2" >上期</th>

</tr>

<tr >

<th>

相关资料更多>

  1. HTML 初学者指南(5)
  2. 0顶html教学+HTML语法大全
  3. 关于怎样禁止<textarea>在chrome等浏览器中允许拖动改变大小的有关问题
  4. 请教怎么在opera浏览器中禁用鼠标右键或者复制
  5. css+div设计的应聘解决思路
  6. html旋钮对话框的使用和javascript:应用
  7. css式样 z-index属性的使用
  8. js画图开发库-mxgraph-[perimeter-边境.html ]
  9. html5 兑现摇一摇功能