欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

两种方法用HTML原生创建带边框的表格

最编程 2024-08-08 07:58:50
...

css部分:

table {
      border-collapse: separate;
      border-top: 1px solid #dfe6ec;
      border-left: 1px solid #dfe6ec;
    }
thead tr th {
      background-color: #f8f8f9;
      padding: 6px;
      text-align: center;
      border-bottom: 1px solid #dfe6ec;
      border-right: 1px solid #dfe6ec;
}
tbody tr td {
      padding: 6px;
      text-align: center;
      height: 34px;//设置单元格最小高度
      border-bottom: 1px solid #dfe6ec;
      border-right: 1px solid #dfe6ec;
}

 

以上一、二两种方式展示表格效果均如下:

在使用html2canvas生成<table>图片的时候,如果用方式一,会导致生成的图片表格边框过粗,效果如下:

而用方式二手动设置边框,生成的图片和网页显示的表格一致,如下图所示:

因此,生成图片等场景,推荐使用方式二手动设置表格边框的方式实现原生table.

 

 注:cellpadding与cellspacing的区别如下

cellpadding 属性规定单元边沿与单元内容之间的空间,以像素计。

cellspacing 属性规定单元之间的空间,以像素计。若不设置该属性,则其默认值为 cellspacing="2"。

 HTML5 不支持cellpadding与cellspacing属性,cellpadding可使用CSS 代替,设置td和th的内边距padding即可。

 

 

推荐阅读