CSS 基础学习-115 css使用border-collapse 属性设置合并表格边框

由 hrs, 18 十月, 2021

使用border-collapse 属性设置合并表格边框

实例代码；

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      table,th,td{
        border:1px solid black;
        text-align:center;
        border-collapse:collapse;
      }
      table{
        width:20%;
      }
      p{
      color:red;
      }
  </style>
  </head>
  <body>
    <h1>css 合并表格边框线</h1>
    <table>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>18</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>15</td>
      </tr>
    </table>
    <p>注：表格的边框线合并为一条。</p>
  </body>
</html>

运行效果：

css-115.png

标签

评论