html实现原生table并设置表格边框的两种方式

这篇具有很好参考价值的文章主要介绍了html实现原生table并设置表格边框的两种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

虽然第三方表格插件多不胜数,但是很多场景还是需要用到原生<table>,掌握html原生table的实现方法,是前端开发的必备技能。例如:print-js打印、html2canvas生成图片等,用原生table可以规避很多问题。

首先,在写原生<table>之前,我们先认识一下 border-collapse 属性:

border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是像在标准的 HTML 中那样分开显示。

html实现原生table并设置表格边框的两种方式

 文章来源地址https://www.toymoban.com/news/detail-550034.html

大多数情况下,我们要求表格的边框合并为单一边框,要实现这样的效果,有如下两种方式:

一、利用css属性 border-collapse: collapse设置边框

html部分:

<table style="width: 100%" border="1" cellspacing="1">
      <thead>
          <tr>
            <th rowspan="2">姓名</th>     <!-- rowspan代表单元格纵向合并 -->
            <th colspan="2">个人信息</th>  <!-- colspan代表单元格横向合并 -->
          </tr>
          <tr>
            <th>性别</th>
            <th>年龄</th>
          </tr>
      </thead>
      <tbody>
          <tr>
            <td>张三</td>
            <td></td>
            <td>20</td>
          </tr>
          <tr>
            <td>李四</td>
            <td></td>
            <td rowspan="2">30</td>
          </tr>
          <tr>
            <td>小红</td>
            <td></td>
          </tr>
      </tbody>
</table>
css部分:
table {
      border-collapse: collapse; //合并为一个单一的边框
      border-color: #dfe6ec; //边框颜色按实际自定义即可
}
thead tr th {
      background-color: #f8f8f9; //设置表格标题背景色
      padding: 6px;
      text-align: center;
}
tbody tr td {
      padding: 6px;
      text-align: center;
      height: 34px;//设置单元格最小高度
}
 
二、手动设置td和table的边框:
html部分:
<table style="width: 100%" border="0" cellspacing="0">
      <thead>
          <tr>
            <th rowspan="2">姓名</th>
            <th colspan="2">个人信息</th>
          </tr>
          <tr>
            <th>性别</th>
            <th>年龄</th>
          </tr>
      </thead>
      <tbody>
          <tr>
            <td>张三</td>
            <td></td>
            <td>20</td>
          </tr>
          <tr>
            <td>李四</td>
            <td></td>
            <td rowspan="2">30</td>
          </tr>
          <tr>
            <td>小红</td>
            <td></td>
          </tr>
      </tbody>
</table>

 

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;
}

 

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

html实现原生table并设置表格边框的两种方式

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

html实现原生table并设置表格边框的两种方式

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

html实现原生table并设置表格边框的两种方式

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

 

 注:cellpadding与cellspacing的区别如下

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

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

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

 

 

到了这里,关于html实现原生table并设置表格边框的两种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element ui修改el-table表格单元格边框颜色

    element-ui官网 第一步:设置除表头单元格边框样式 :cell-style=“{borderColor:‘#01e3ed’}” 第二步:设置表头单元格边框样式 :header-cell-style=“{borderColor:#01e3ed}” 第三步:单独给表格加样式 加个类名class=“exporttable” 第四步:功能实现 -点赞 + 收藏!你是最美的!

    2024年02月14日
    浏览(34)
  • HTML--CSS--边框、列表、表格样式

    属性: border-width 边框宽度 border-style 边框外观 border-color 边框颜色 需要同时设定三个属性 取值为像素值 none 无样式 dashed 虚线 solid 实线 如示例: 为 div 设定了一个边框,虚线,宽度10像素,颜色是红色 效果: 另一写法:简写,将配置都写进 border里 ,效果是一样的 border-top

    2024年01月17日
    浏览(46)
  • Word表格设置边框不生效的解决方法

    我的手指还能活动,我的大脑还能思维;我有终身追求的理想,我有爱和爱我的亲人朋友;对了,我还有一颗感恩的心。——霍金

    2024年02月12日
    浏览(99)
  • html嵌套html的两种方法( iframe,load)

    src:你要导入的html scrolling:  是否开启滚屏 frameborder:  是否设置边框 style:设置样式 获取某个div的id或者class调用load方法 里面填写要嵌套html的路径就可以了

    2024年02月15日
    浏览(53)
  • el-table中点击跳转到详情页的两种方法

    跳转的两种写法: 1.使用keep-alive使组件缓存,防止刷新时参数丢失 keep-alive 组件用于缓存和保持组件的状态,而不是路由参数。它可以在组件切换时保留组件的状态,从而避免重新渲染和加载数据。 keep-alive 主要用于提高页面性能和用户体验,而不涉及路由参数的传递和保留。

    2024年02月10日
    浏览(39)
  • 「第四章」python-docx 为word添加表格、设置表格边框

    第三章中,我们讲解了如何在利用 add_heading 在 docx 文档中花式添加标题,这一节,我们来一起玩一下 docx 中的 table ,也就是表格,表格部分的内容还蛮多的,我们这一章不一定讲得完,能嘚吧多少算多少,今天刚好有时间,多更新一些哇。🎃 🧡 导入 docx 库 🧡 创建 docum

    2024年02月02日
    浏览(54)
  • Android原生键盘弹起,H5页面被压缩的两种解决方案

    移动H5项目中,会出现input框获得焦点键盘弹出把页面元素顶上去压缩到一起,影响页面布局. 方案一:监听页面变化,动态的展示和隐藏底部被顶上来的内容 这种方法经调试还不算十分完美 方案二:监听页面变化,键盘弹起时将变化之前的高度赋值给压缩后的页面         这种

    2024年02月16日
    浏览(40)
  • 云原生(第三篇)-k8s资源管理的两种方式

    1.kubernetes 集群管理集群资源的唯一入口是通过相应的方法调用 apiserver 的接口 2.kubectl 是官方的CLI命令行工具,用于与 apiserver 进行通信,将用户在命令行输入的命令,组织并转化为 apiserver 能识别的信息,进而实现管理 k8s 各种资源的一种有效途径 3.kubectl 的命令大全 kubectl

    2024年02月13日
    浏览(58)
  • 【elementplus】解决el-table开启show-overflow-tooltip后,tooltip的显示会被表格边框遮挡的问题

    如图所示: 原因: 1. el-table没有设置高度;2.就是被遮住了 解决: 方法一:给el-table设置高度 方法二: 如果不想给el-table设置高度,就直接使用方法二解决即可

    2024年02月12日
    浏览(74)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包