当前位置: 首页 > news >正文

【css】css设置表格样式-边框线合并

<style>
table, td, th {border: 1px solid black;//设置边框线
}table {width: 100%;
}td {text-align: center;//设置文本居中
}
</style>
</head>
<body><table><tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr><tr><td>Bill</td><td>Gates</td><td>$100</td></tr><tr><td>Steve</td><td>Jobs</td><td>$150</td></tr>
</table></body>

渲染效果:
在这里插入图片描述
渲染出来的效果不好看,边框线存在两条,现在需要将它们合并,添加 border-collapse: collapse。

<style>
table, td, th {border: 1px solid black;
}table {border-collapse: collapse;//添加边框线合并width: 100%;
}td {text-align: center;
}
</style>
</head>
<body><table><tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr><tr><td>Bill</td><td>Gates</td><td>$100</td></tr><tr><td>Steve</td><td>Jobs</td><td>$150</td></tr>
</table></body>

渲染效果:
在这里插入图片描述

http://www.lryc.cn/news/107060.html

相关文章:

  • 使用Flutter的image_picker插件实现设备的相册的访问和拍照
  • 数学建模体系
  • 13.7 CentOS 7 环境下大量创建帐号的方法
  • HTML5 Canvas(画布)
  • io的异常处理以及properties
  • Linux下基于Dockerfile构建镜像应用(1)
  • JS中常见的模块管理规范梳理
  • 3维空间下按平面和圆柱面上排版设计
  • 【Spring框架】Spring AOP
  • 寻找旋转排序数组中的最小值——力扣153
  • 安卓逆向 - 基础入门教程
  • 验证码安全志:AIGC+集成环境信息信息检测
  • R-Meta分析教程
  • 【3维视觉】3D空间常用算法(点到直线距离、面法线、二面角)
  • Nodejs 第四章(Npm install 原理)
  • [深度学习] GPU处理能力(TFLOPS/TOPS)
  • js:获取浏览器默认语言
  • 【U8+】用友U8重新注册加密锁,提示:写卡失败,请重新配置客户端控件。
  • uniapp小程序console.log在微信开发者工具中不打印问题
  • 从零基础开始开发自己的第一个微信小程序
  • 无涯教程-Lua - Arrays(数组)
  • 0基础学习VR全景平台篇 第76篇:全景相机-圆周率全景相机如何直播推流
  • 超详细|ChatGPT论文润色教程
  • MMDeploy安装、python API测试及C++推理
  • [openCV]基于拟合中线的智能车巡线方案V3
  • vite+typescript项目 :找不到模块“./***.vue”或其相应的类型声明——解决方案
  • Gradio-YOLOv5-YOLOv7 搭建Web GUI
  • HTML模板生成word,pdf文档
  • ssl单向证书和双向证书校验测试及搭建流程
  • 【2种方法,jmeter用一个正则提取器提取多个值!】