HTML画表格table边线重合问题(border-collapse: collapse;)

HTML画表格table边线重合问题(border-collapse: collapse;)文章目录一、参考问题描述解决思路一、使用DIV+CSS二、使用tableborder-collapse案例一、参考CSSborder-collapse属性问题描述工作中,需要画一个表格,需要显示border,于是使用DIV+CSS的方式,如果设置“border:1pxsolidred”的样式,结果div重合的地方就会出现2倍的边线,与设计不符解决思路一、使用DIV+CSS如果一定要使用DIV+CSS,则需要区分第一行、最后一行、第一列、最后一列、中间表格的

一、参考

  1. CSS border-collapse 属性

问题描述

工作中,需要画一个表格,需要显示border,于是使用DIV+CSS的方式,如果设置“border: 1px solid red”的样式,结果div重合的地方就会出现2倍的边线,与设计不符

在这里插入图片描述

解决思路

一、使用DIV + CSS

如果一定要使用DIV+CSS, 则需要区分第一行 、 最后一行 、第一列、最后一列 、中间表格的边线,然后画出一个表格,显然这种方式太麻烦了

二、使用table border-collapse

属性说明:为表格设置合并边框模型

案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
      table { 
   
        border-collapse: collapse;
      }

      table,
      td,
      th { 
   
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr>
        <td>Bill</td>
        <td>Gates</td>
      </tr>
      <tr>
        <td>Steven</td>
        <td>Jobs</td>
      </tr>
    </table>

    <p>
      <b>注释:</b>
      如果没有规定 !DOCTYPE,border-collapse 属性可能会引起意想不到的错误。
    </p>
  </body>
</html>

实现效果:
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/34435.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注