div+css:表格边框合并属性border-collapse

最新推荐文章于 2024-06-25 17:21:00 发布

weixin_30762087

最新推荐文章于 2024-06-25 17:21:00 发布

阅读量894

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/dandantailang/archive/2011/09/29/2195138.html

版权

表格边框合并属性(border-collapse)用来定义表格中边框是独立显示还是合并显示。在边框合并属性中，使用的属性值有两个：分别为separate和collapse。其语法结构如下所示。
border-collapse:separate|collapse;
其中各个属性值的含义如下所述。
●        separate:定义表格边框独立显示。
●        collapse:定义表格边框合并显示。
范例：一个使用表格边框合并属性的实例
其代码如下所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css属性实例</title>
<style>
.table1
{
border-collapse:separate;
}
.table2
{
border-collapse:collapse;
}
table
{
border:2px solid #000000;
margin:0 0 20px 0;
}
td
{
border:1px solid #999999;
width:200px;
height:80px;
}
</style>
</head>

<body>
<table class="table1">
    <tr>
      <td>这里是表格中的内容部分</td>
      <td>这里是表格中的内容部分</td></tr>
    <tr>
      <td>这里是表格中的内容部分</td>
      <td>这里是表格中的内容部分</td></tr></table>
<table class="table2">
    <tr>
      <td>这里是表格中的内容部分</td>
      <td>这里是表格中的内容部分</td></tr>
    <tr>
      <td>这里是表格中的内容部分</td>
      <td>这里是表格中的内容部分</td></tr></table>
</body>
</html>

以上的代码中分别定义了两个两行两列的表格。在第一个表格中，定义边框合并属性值为独立显示。在第二个表格中，定义边框合并属性值为合并显示。同时定义了表格边框为2px黑色实线边框，单元格为1px灰色实线边框。另外还定义了表格的边界属性，目的是将表格之间分隔一段距离。

转载于:https://www.cnblogs.com/dandantailang/archive/2011/09/29/2195138.html

weixin_30762087

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div+css:表格边框合并属性border-collapse

表格边框合并属性(border-collapse)用来定义表格中边框是独立显示还是合并显示。在边框合并属性中，使用的属性值有两个：分别为separate和collapse。其语法结构如下所示。border-collapse:separate|collapse;其中各个属性值的含义如下所述。● separate:定义表格边框独立显示。● collapse:定义表格边框合并...
复制链接

扫一扫