css如何实现只保留内部边框

最新推荐文章于 2022-10-04 21:07:10 发布
最新推荐文章于 2022-10-04 21:07:10 发布
阅读量806 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/573397
版权

在实际应用中可能有这样的需求，那就是只保留表格的内部边框，可能这样的需求不多，既然有这样的需求，作为程序员就要实现这样的功能，下面分享一段能够实现此功能的代码实例。

代码如下:

 
 
 
  
 
   
 
    
 
        

          01 
        
 
        

          02 
        
 
        

          03 
        
 
        

          04 
        
 
        

          05 
        
 
        

          06 
        
 
        

          07 
        
 
        

          08 
        
 
        

          09 
        
 
        

          10 
        
 
        

          11 
        
 
        

          12 
        
 
        

          13 
        
 
        

          14 
        
 
        

          15 
        
 
        

          16 
        
 
        

          17 
        
 
        

          18 
        
 
        

          19 
        
 
        

          20 
        
 
        

          21 
        
 
        

          22 
        
 
        

          23 
        
 
        

          24 
        
 
        

          25 
        
 
        

          26 
        
 
        

          27 
        
 
        

          28 
        
 
        

          29 
        
 
        

          30 
        
 
        

          31 
        
 
        

          32 
        
 
        

          33 
        
 
        

          34 
        
 
        

          35 
        
 
        

          36 
        
 
        

          37 
        
 
        

          38 
        
 
        

          39 
        
 
        

          40 
        
 
        

          41 
        
 
        

          42 
        
 
        

          43 
        
 
        

          44 
        
 
        

          45 
        
 
        

          46 
        
 
        

          47 
        
 
        

          48 
        
 
        

          49 
        
 
        

          50 
        
 
        

          51 
        
 
        

          52 
        
 
        

          53 
        
 
        

          54 
        
 		 
        
 
         
 
          <!DOCTYPE html> 
         
 
         
 
          < 
          html 
          > 
         
 
         
 
          < 
          head 
          > 
         
 
         
 
          < 
          meta 
          charset 
          = 
          " utf-8" 
          > 
         
 
         
 
          < 
          meta 
          name 
          = 
          "author" 
          content 
          = 
          "http://www.softwhy.com/" 
          /> 
         
 
         
 
          < 
          title 
          >蚂蚁部落</ 
          title 
          > 
         
 
         
 
          < 
          style 
          type 
          = 
          "text/css" 
          > 
         
 
         
 
          table{  
         
 
         
 
             
          border-collapse:collapse;  
         
 
         
 
             
          border:0px solid #999;  
         
 
         
 
          }  
         
 
         
 
          table td{  
         
 
         
 
             
          border-top:0;  
         
 
         
 
             
          border-right:1px solid #999;  
         
 
         
 
             
          border-bottom:1px solid #999;  
         
 
         
 
             
          border-left:0;  
         
 
         
 
          }  
         
 
         
 
          table tr.lastrow td {  
         
 
         
 
             
          border-bottom:0;  
         
 
         
 
          }  
         
 
         
 
          table tr td.lastCol{  
         
 
         
 
             
          border-right: 0;  
         
 
         
 
          }  
         
 
         
 
          </ 
          style 
          > 
         
 
         
 
          </ 
          head 
          > 
         
 
         
 
          < 
          body 
          > 
         
 
         
 
          < 
          table 
          > 
         
 
         
 
             
          < 
          tr 
          > 
         
 
         
 
               
          < 
          td 
          >蚂蚁部落一</ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          >蚂蚁部落二</ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          >蚂蚁部落三</ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          >蚂蚁部落四</ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          >蚂蚁部落五</ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          class 
          = 
          "lastCol" 
          >蚂蚁部落六</ 
          td 
          > 
         
 
         
 
             
          </ 
          tr 
          > 
         
 
         
 
             
          < 
          tr 
          > 
         
 
         
 
               
          < 
          td 
          >蚂蚁部落一</ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          >蚂蚁部落二</ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          >蚂蚁部落三</ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          >蚂蚁部落四</ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          >蚂蚁部落五</ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          class 
          = 
          "lastCol" 
          >蚂蚁部落六</ 
          td 
          > 
         
 
         
 
             
          </ 
          tr 
          > 
         
 
         
 
             
          < 
          tr 
          class 
          = 
          "lastrow" 
          > 
         
 
         
 
               
          < 
          td 
          >蚂蚁部落一</ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          >蚂蚁部落二</ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          >蚂蚁部落三</ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          >蚂蚁部落四</ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          >蚂蚁部落五</ 
          td 
          > 
         
 
         
 
               
          < 
          td 
          class 
          = 
          "lastCol" 
          >蚂蚁部落六</ 
          td 
          > 
         
 
         
 
             
          </ 
          tr 
          > 
         
 
         
 
          </ 
          table 
          > 
         
 
         
 
          </ 
          body 
          > 
         
 
         
 
          </ 
          html 
          > 
         
 
        
 
 
   
 
  
 
 
 
 
以上代码实现了我们的要求，代码比较简单，这里就不多介绍了，如有任何问题可以跟帖留言。
 
 

 
 

 
 
原文发布时间为：2017-2-13
 
 
本文作者：admin
 
 
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
 
 
原文链接：css如何实现只保留内部边框
 


                

        

        




    




    

      

        

            

              
                
                  weixin_34259232
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
css 3*3网格实现只有内部边框，取消外部边框的样式。

				
			

			

				

					PrimaryColor
				

				

					05-14
					
					663
					
				

			

		

		

			
				
效果图：



说明：白色是需要实现的边框，红色的边框不用看，只是为了称托出外部的边框。最终实现只有内部边框，没有四周的边框。

先说说我的实现思路：

1.默认情况每个都加右边框和下边框。
	2.div为3的倍数没有右边框。
	3.最后三个元素没有下边框。
代码：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-U

			
		

	



                

              
                



	

		

			

				
					
css 表格内去除边框,CSS-仅在表内边框

				
			

			

				

					weixin_31328141的博客
				

				

					08-03
					
					693
					
				

			

		

		

			
				
If you are doing what I believe you are trying to do, you'll need something a little more like this:table {border-collapse: collapse;}table td, table th {border: 1px solid black;}table tr:first-child ...

			
		

	



                


  
              

                


	

		

			

				
					
css两个盒子之间只显示一条边框_用css怎样实现一行两列，中间那条边框是单线的？...

				
			

			

				

					weixin_39675679的博客
				

				

					12-20
					
					344
					
				

			

		

		

			
				
你的位置:问答吧->                    XML/HTML/CSS/JS->                    问题详情用css怎样实现一行两列，中间那条边框是单线的？用css怎样实现一行两列，中间那条边框是单线的？用css怎样实现一行两列，中间那条边框是单线的？不知道这样说大家明白么？就是两个列之间没有空隙的那种，我想问下怎么实现中间那条边框是单线的，我做了一个...

			
		

	





	

		

			

				
					
css去除table外边框并且可以保留内边框 内边框可根据自己的需求调整颜色和粗细 css调节table标签的背景色

				
			

			

				

					qq_52510306的博客
				

				

					03-17
					
					1919
					
				

			

		

		

			
				
本代码中包含 ：
css去除table外边框并且可以保留内边框
内边框可根据自己的需求调整颜色和粗细
css调节table标签的背景色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

			
		

	



		

			
		



	

		

			

				
					
CSS:图片伸缩模糊时进行裁剪保留原始比例展示

				
			

			

				

					YanHSama的博客
				

				

					04-12
					
					420
					
				

			

		

		

			
				
CSS object-fit 属性
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

语法
object-fit: fill|contain|cover|scale-down|none|initial|inherit;


fill	。默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain。	保持原有尺寸比例。内容被缩放。
cove.

			
		

	





	

		

			

				
					
超实用CSS技巧总结（1）——背景和边框

				
			

			

				

					m0_51156601的博客
				

				

					10-04
					
					1408
					
				

			

		

		

			
				
非常好看实用的css技巧


			
		

	





	

		

			

				
					
CSS样式简单实现Table没有外边框只有内边框

				
			

			

				

					09-25
				

			

		

		

			
				
通过上述CSS样式，我们可以看到表格没有了外边框，只保留了内部单元格之间的1像素深灰色内边框。  总结来说，实现"Table没有外边框只有内边框"的效果主要依赖于以下几点CSS技巧： 1. 使用`border-collapse: collapse...

			
		

	





	

		

			

				
					
html5 css3网站菜单实现代码

				
			

			

				

					09-28
				

			

		

		

			
				
 使用`box-shadow`属性可以轻松添加阴影效果，而在本例中还使用了`inset`关键字来实现内阴影的效果，即阴影是从元素内部产生的。   ```css  .news_info a {  box-shadow: 1px 0 0 #F1F1F1 inset;  }  ```  3. **...

			
		

	





	

		

			

				
					
纯CSS实现聊天框小尖角、气泡效果

				
			

			

				

					09-25
				

			

		

		

			
				
总之，纯CSS实现聊天框小尖角和气泡效果的核心在于巧妙利用边框技巧创建三角形，并通过定位和颜色控制来组合成所需的形状。这种方法不仅节省了图片资源，还提供了更高的灵活性和可维护性，是现代网页设计中常用的...

			
		

	





	

		

			

				
					
html做表格只显示表格的外边框

				
			

			

				

					09-22
				

			

		

		

			
				
`应用到`<td>`标签的CSS样式中，移除内部边框。 4. 为整个表格设置外边框样式，如`border: 1px solid #000000;`。  希望这个详细的解释有助于理解和实现只显示表格外边框的需求。如果你在实际操作中遇到任何问题，...

			
		

	





	

		

			

				
					
css实现下来框

				
			

			

				

					07-11
				

			

		

		

			
				
### CSS实现下拉框知识点详解  #### 一、概述  在网页设计中，下拉菜单是一种常见的交互元素，常用于导航栏或者表单选择项等场景。本文将通过一段具体的代码示例，来详细介绍如何使用纯CSS技术实现一个简单的二级...

			
		

	





	

		

			

				
					
判断当前table中的tr是不是最后一行

				
			

			

				

					一码一砖,铸就大厦;
				

				

					06-11
					
					4474
					
				

			

		

		

			
				
修改项目中的一个功能：

			
		

	





	

		

			

				
					
CSS实现Table没有外边框，只有内边框

					
热门推荐

				
			

			

				

					Shaniya
				

				

					05-05
					
					2万+
					
				

			

		

		

			
				
效果图：


实现方法：

			
		

	





	

		

			

				
					
table css控制边框

				
			

			

				

					weixin_33809981的博客
				

				

					04-15
					
					2478
					
				

			

		

		

			
				
Table之CSS控制Table内外边框,颜色,大小

其实按照常理来说，现在的网站应该早已经抛弃什么表格了，现在肯定是DIV+CSS当道嘛！不过客户的网站在添加内容的时候始终不满意那些边框效果：要么没有，要么很粗。看得出来，这位客户是位完美主义者。
在默认的情况下，我们的CSS将Table的边框清除掉了，是没有的，看到的效果是这样的。

无边框Table
为了给，表格加一个边框，我在...

			
		

	





	

		

			

				
					
CSS实现表格无外边框效果（只有内十字）

				
			

			

				

					greystar的专栏
				

				

					09-04
					
					1万+
					
				

			

		

		

			
				
效果如下：代码如下：                                                       table{                 margin:auto;                 width:300px;                border-collapse:collapse;             }             th,

			
		

	





	

		

			

				
					
css table只要外边框,CSS样式怎么实现Table没有外边框只有内边框

				
			

			

				

					weixin_39889481的博客
				

				

					08-03
					
					1144
					
				

			

		

		

			
				
CSS样式怎么实现Table没有外边框只有内边框发布时间：2021-07-28 17:57:13来源：亿速云阅读：68作者：chen本篇内容主要讲解“CSS样式怎么实现Table没有外边框只有内边框”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS样式怎么实现Table没有外边框只有内边框”吧!效果图：实现方法：代码如下:html>I...

			
		

	





	

		

			

				
					
html表格边框仅一条线,css 设置table边线 为一条线

				
			

			

				

					weixin_33483080的博客
				

				

					06-03
					
					3836
					
				

			

		

		

			
				
table{border-collapse:collapse;}很简单定义和用法border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。例子 1border-style:dotted solid double dashed;上边框是点状右边框是实线下边框是双线左边框是虚线例子 2border-style:dotted s...

			
		

	





	

		

			

				
					
css border边距 在盒子内部呈现，不占用外部Px

				
			

			

				

					大宅广的博客
				

				

					11-14
					
					2万+
					
				

			

		

		

			
				
box-sizing: border-box;
  border: solid 1px white;






绿色边框即为 边距内部呈现效果；

			
		

	





	

		

			

				
					
css只显示某一边框

				
			

			

				

					Cool_so_cool的博客
				

				

					11-05
					
					1045
					
				

			

		

		

			
				
简单记录一个CSS样式
只显示底边框
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color:#D8D8D8;




			
		

	





	

		

			

				
					
保留外边边框 ，去掉内部边框

					
最新发布

				
			

			

				

					06-01
				

			

		

		

			
				
如果您想保留表格的外边框，但是去掉内部边框，可以使用CSS的border-collapse属性。以下是一个示例代码：

```css
table {
  border-collapse: collapse;
  border: 1px solid black;
}

td, th {
  border: none;
}
```

这将会把表格的边框合并为一个单一的线条，并且去掉表格内部单元格的边框。您可以根据需要调整边框的宽度和颜色。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值