如何使用CSS合并表格边框？

html-css023

如何使用CSS合并表格边框？,第1张

在CSS中可以使用border-collapse属性来合并表格边框；border-collapse属性用于设置表中存在的单元格的边框，并告知这些单元格是否共享公共边框。

border-collapse属性设置表格的边框是否被合并为一个单一的边框。

语法：

属性值：

●　separate：用于设置单元格的单独边框。

●　collapse：用于折叠相邻的细胞并形成共同的边界。

●　initial：用于将border-collapse属性设置为其默认值。

●　inherit：当border-collapse属性从其父元素继承时使用。

示例：

效果图：

浏览器支持

border-collapse属性支持的浏览器如下：

●　Apple Safari 1.2

●　谷歌Chrome 1.0

●　Internet Explore / Edge 5.0

●　Opera 4.0

●　Firefox 1.0

原文地址： 如何使用CSS合并表格边框？

您好！以下是最典型的细线表格，具备最基本的设置。供参考：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>表格CSS设置</title>

<style>

#tb1 {

    border-collapse: collapse /* 折叠边框产生细线表格*/

    border: 2px solid black   /* 外框粗线、内部细线表格，表格线为黑色 */

}

#tb2 {

    border-collapse: collapse /* 折叠边框产生细线表格*/

    border: 1px solid red     /* 细线表格，表格线为红色 */

}

</style>

</head>

<body>

<br>

<table id="tb1" width="379" height="87" border="1" cellpadding="0" cellspacing="0">

  <tbody>

    <tr>

      <td width="123" height="34">&nbsp</td>

      <td width="122">&nbsp</td>

      <td width="126">&nbsp</td>

    </tr>

    <tr>

      <td height="25">&nbsp</td>

      <td>&nbsp</td>

      <td>&nbsp</td>

    </tr>

    <tr>

      <td>&nbsp</td>

      <td>&nbsp</td>

      <td>&nbsp</td>

    </tr>

  </tbody>

</table>

<br>

<table id="tb2" width="379" height="89" border="1" cellpadding="0" cellspacing="0">

  <tbody>

    <tr>

      <td width="123" height="36">&nbsp</td>

      <td width="122">&nbsp</td>

      <td width="126">&nbsp</td>

    </tr>

    <tr>

      <td height="25">&nbsp</td>

      <td>&nbsp</td>

      <td>&nbsp</td>

    </tr>

    <tr>

      <td>&nbsp</td>

      <td>&nbsp</td>

      <td>&nbsp</td>

    </tr>

  </tbody>

</table>

</body>

</html>

显示结果：