之前的文章《一招教你使用css3制作按钮添加动态效果（代码分享）》中，给大家介绍了怎么使用css3制作按钮添加动态效果。下面本篇文章给大家介绍怎么使用css制作表格边框设置效果，我们一起看看怎么做。
网页中常常有这样的表格布局边框，给大家分享一下看效果图看完效果，我们来研究一下是怎么实现呢，给大家用于讲解html+css表格布局的基本流程。
1、首先html创建新文件，定义3个tr标签。
编号 姓名 热线 1 JAK 1545122 2 ROSE 30420
代码效果
立即学习“前端免费学习笔记（深入）”；
2、利用
代码效果
立即学习“前端免费学习笔记（深入）”；
3、给表格修饰使用css选择器tab进行样式初始化，添加边框border属性设置成为线的宽度为1px的实线并添加颜色设置成为红色。
4、对tab选择器进行样式添加设置尺寸使用width宽度为300px；给它添加表格用table-layout设置或检索表格的布局算法，取值：auto，语法成为“table-layout: auto”，固定布局算法，取值：fixed，语法成为“table-layout: fixed”。
.tab {border: 1px solid red;width: 300px;table-layout: auto;/* 固定布局算法 */table-layout: fixed;}
5、将tab选择器给二个定义“th与td”添加边框border属性设置成为线的宽度为1px的实线并添加颜色设置成为黑色。
.tab th, .tab td {border: 1px solid black;}
代码效果
立即学习“前端免费学习笔记（深入）”；
ok,编辑代码完成！
完整代码
.tab {border: 1px solid red;width: 300px;table-layout: auto;/* 固定布局算法 */table-layout: fixed;}.tab th, .tab td {border: 1px solid black;} 编号 姓名 热线 1 JAK 1545122 2 ROSE 30420
推荐学习：CSS视频教程
以上就是手把手教你使用css制作表格边框设置效果（附代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1621598.html
微信扫一扫
支付宝扫一扫
关于作者
相关推荐
-
详解CSS中的伪元素::before和::after
本篇文章带大家了解一下css中的::before和::after伪元素，看看它们的应用，希望对大家有所帮助！ 本文从最简单的开始，解释如何理解和使用::before和::after。然后再在实际使用场景中去应用它。 ::before和::after是什么? ::before和::after可以添加到…
-
新手篇：如何用css制作图片文字排版（代码分享）
之前的文章《手把手教你使用css制作表格边框设置效果（附代码）》中，给大家介绍了怎么使用css制作表格边框设置效果。下面本篇文章给大家介绍如何用css制作图片文字排版的方法，我们一起看看怎么做。 网页中常常有这样的CSS图片文字排版，给大家分享一下看效果图看完效果，我们来研究一下是怎么实现呢，给大家…
-
中秋献礼，分享一个CSS日地月公转动画效果！
中秋节快到了，下面本篇文章给大家分享一个纯css实现的日地月公转动画效果，打开快来学习一下！ 为了这次掘金的中秋活动，我也算是苦思冥想了两天，终于想到了一个在掘金没见人做过的东西（应该没做过吧，我也不知道）—— 用 HTML+CSS 模拟日地月的公转。【相关推荐：《css视频教程》】 我们都知道中秋…
-
手把手教你使用CSS制作逼真的水波纹效果（附代码）
之前的文章《新手篇：如何用css制作图片文字排版（代码分享）》中，给大家介绍了如何用css制作图片文字排版。下面本篇文章给大家介绍怎么使用CSS实现逼真的水波纹点击效果，我们一起看怎么做。 网页中常常有这样的CSS水波纹的效果，给大家分享一下看效果图看完效果，我们来研究一下是怎么实现呢，给大家用于讲…
-
一文讲解CSS制作动画常用技巧（收藏）
之前的文章《你值得了解的JS高级技巧（总结）》中，给大家了解了JS高级技巧。下面本篇文章给大家了解CSS制作动画常用技巧，我们一起看看怎么做。 transition CSS 中有一个transition属性，能够监听某个 CSS 属性的变化，通过属性变化的控制，实现简单的动画效果： transiti…
-
深入浅出解析css字体图标的制作和使用（代码分享）
之前的文章《一文讲解CSS制作动画常用技巧（收藏）》中，给大家了解了CSS制作动画常用技巧。下面本篇文章给大家了解css字体图标的制作和使用，伙伴们过来看看一下。 css字体图标的制作和使用 在项目开发的过程中，我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多…
-
教你用CSS绘制一个带有渐变边框的圆！
在上一篇《用html/css制作有趣的动态波浪形文本行》中给大家介绍了如何用用html/css制作动态波浪形文本行，感兴趣的朋友可以去了解一下~ 本文将继续给大家介绍怎么用css实现一个带有渐变边框的圆。 首先我给大家简单说一下实现思路：我将创建两个 div，一个是类名为outer_circle 的…
-
如何使用CSS动态调整旋转半径？
在之前的文章《教你用css绘制一个带有渐变边框的圆！》中给大家介绍了如何使用css绘制一个带有渐变边框的圆，感兴趣的朋友可以去了解一下~ 那么本文的重点内容则是教大家如何使用css调整旋转半径。 在CSS中，我们可以使用CSS自定义属性(变量)调整旋转半径的大小。现在Mozilla、谷歌、Opera…
-
利用css制作有趣的文字摆动动画特效
在之前的文章《超实用！利用css3将两个图片叠加在一起显示》中，我们分享了两种利用css3将两个图片叠加融合在一起显示的特效。这次我们给大家介绍一下利用css如何制作文字摆动动画特效，感兴趣的可以学习了解一下~ 文本文字是网页中最常见的一种组成部分，给文字添加动画效果可以让网页更加吸引人，今天就来给…
-
使用CSS快速更改PNG图像的颜色（两种方法）
在上一篇《如何用html和css制作玻璃/模糊效果？》文章中给大家介绍了用html和css制作玻璃/模糊效果的方法，感兴趣的朋友可以阅读了解一下~ 本文将给大家介绍如何使用CSS快速更改PNG图像的颜色，这也是日常开发中比较常见一个效果实现方法。 首先大家可以先下载本文中展示的png图片素材，下载地…
-
炫酷！CSS创建响应式堆叠卡片悬停效果
在上一篇《使用css快速更改png图像的颜色（两种方法）》中给大家介绍了怎么使用css快速更改png图像的颜色，感兴趣的朋友可以去看看~ 本文将给大家介绍一种炫酷的效果，就是用CSS创建响应式堆叠卡片悬停效果。到底是什么样的效果呢？我们继续往下看！ 在开始之前，我先介绍一下实现的整体大致思路：首先我…
-
一步一步教你使用CSS制作文字实现逐帧动画（附代码）
之前的文章《手把手教你使用css3制作炫酷的导航栏效果（代码详解）》中，给大家介绍了怎么使用css3制作炫酷的导航栏效果，下面本篇文章给大家介绍怎么使用CSS制作文字实现逐帧动画，我们一起看看怎么做。 文字实现逐帧动画是网页中最常见的一种组成部分，给文字添加逐帧动画效果，给大家分享一下看效果图 看完…
-
新手篇：如何用ccs制作一个简单的布局（附代码）
之前的文章《手把手教你使用css3制作炫酷的导航栏效果（代码详解）》中，给大家介绍怎么使用css3制作炫酷的导航栏效果。下面本篇文章给大家介绍如何用html制作一个简单的布局的方法，我们一起看看怎么做。 生活中互联网发达了，网页中常常有这样的布局，给大家分享一下看效果图看完效果，我们来研究一下是怎么…
-
一招教你使用css3制作按钮添加动态效果（代码分享）
之前的文章《新手篇：如何用ccs制作一个简单的布局（附代码）》中，给大家介绍了如何用ccs制作一个简单的布局。下面本篇文章给大家介绍怎么使用css3制作按钮添加动态效果，我们一起看看怎么做。 css如何实现button按钮效果? HTML结构： 首先定义一个body，使用button按钮，添加文字v…
-
css怎样设置页面居中
css设置页面居中的方法：1、“text-align:center”设置水平居中。 2、“dispaly:flex”设置水平居中。3、“display:table-cell”设置垂直居中。4、“position:absolute”设置垂直居中。 本教程操作环境：windows7系统、CSS3&…
-
html中css代码可以放在哪里
css代码的位置：1、直接利用style属性，放到html标签中，语法“”；2、使用style标签把css代码集中写在文档的head头部标签中，语法“css代码”。 本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。 在html中，css代码的放置位…
-
css怎么给文字加背景
方法：1、用“color: transparent”设置文字透明；2、用“background-image:url(“图片地址”)”给文字加背景图片；3、用“background-clip: text;”将图片和文字融合，实现文字背景效果。 本教程操作环境：windows7系…
-
css如何设置标题阴影边框
方法：1、利用border属性给标题元素添加边框，语法“border:宽度 样式 颜色;”；2、利用“text-align: center”实现标题文本居中；3、使用box-shadow属性给标题元素的边框添加阴影效果。 本教程操作环境：windows7系统、CSS3&&HTML5版…
-
如何使用CSS创建波浪背景？
在这篇《用css快速创建高级模糊感的背景图像》中给大家介绍了使用css快速创建高级模糊感的背景图像的方法，感兴趣的朋友可以去了解一下~ 那么本文咱们再给大家介绍一种用css快速实现波浪背景的方法，保证让你的页面拥有个性的背景，当然还有什么想要实现的背景风格大家可以评论告诉我！ 注：本文将使用befo…
-
手把手教你使用css给文字添加火焰效果（代码详解）
之前的文章《一招教你使用html给图片添加边框效果（代码详解）》中，给大家介绍了怎么使用html给图片添加边框效果。下面本篇文章给大家介绍怎么使用css给文字添加火焰效果，我们一起看看怎么做。 打开HTML代码软件，建立一个代码 1、这儿来一个p标签，然后咱就随便写几个，开心就笑，累了就睡觉，醒了就…
