原创投稿
  1. 创想鸟首页
  2. 用户投稿

手把手教你使用css制作表格边框设置效果（附代码）

程序猿 • • 用户投稿

之前的文章《一招教你使用css3制作按钮添加动态效果（代码分享）》中，给大家介绍了怎么使用css3制作按钮添加动态效果。下面本篇文章给大家介绍怎么使用css制作表格边框设置效果，我们一起看看怎么做。

手把手教你使用css制作表格边框设置效果（附代码）

网页中常常有这样的表格布局边框，给大家分享一下看效果图看完效果，我们来研究一下是怎么实现呢，给大家用于讲解html+css表格布局的基本流程。

微信截图_20210913170838.png

1、首先html创建新文件，定义3个tr标签。

编号姓名热线1JAK15451222ROSE 30420

代码效果

立即学习“前端免费学习笔记（深入）”；

微信截图_20210913170909.png

2、利用

以实现“表格布局”因为表格中同一行的单元格行高总是一致的，所以“表格布局”可以避免“浮动布局”时出现的“底部对不齐”情况。



<tr><th>编号</th><th>姓名</th><th>热线</th></tr><tr><td>1</td><td>JAK</td><td>1545122</td></tr><tr><td>2</td><td>ROSE </td><td>30420</td></tr>






代码效果


立即学习“前端免费学习笔记（深入）”；


微信截图_20210913170857.png


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






代码效果


立即学习“前端免费学习笔记（深入）”；


微信截图_20210913170838.png


ok,编辑代码完成！


完整代码




.tab {border: 1px solid red;width: 300px;table-layout: auto;/* 固定布局算法 */table-layout: fixed;}.tab th, .tab td {border: 1px solid black;}编号姓名热线1JAK15451222ROSE 30420






推荐学习：CSS视频教程




以上就是手把手教你使用css制作表格边框设置效果（附代码）的详细内容，更多请关注创想鸟其它相关文章！


                                                        
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。

发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1621598.html
                        


                        

                        

                            
 赞 (0)

                                                            

                                     打赏                                    
                                                                                    
                                                微信扫一扫
                                                    微信扫一扫                                            
                                                                                                                            
                                                支付宝扫一扫
                                                    支付宝扫一扫                                            
                                                                            
                                

                                                    


                        

                            

                                                                

                                    

                                                                                     0                                         0                                                                            

                                    
                                    

                                        
                                    

                                

                            

                        

                    

                    

    
关于作者
    

        

            程序猿的头像
        

        

            

                

                    程序猿签约作者
                

                

                                    

            

                            
            

                413.8K
                文章
            

                    

                0
                评论
            

                    

                2
                粉丝
            

        

                        
这个人很懒，什么都没有留下～
        

    


                        

                    

                详解CSS中的伪元素::before和::after                
                

                     上一篇
                    2025年12月24日 07:34:31
                

            

                            

                css中如何设置元素宽度                
                

                    下一篇 
                    2025年12月24日 07:34:41
                

            

            

                                                                

                            
相关推荐
                        

                    


    	

		
发表回复 
登录后才能评论
 
	

		

                
                    
            
    



            

                                                

                                                                                                            

                                        关注微信