table 表格细线条实现方式

最新推荐文章于 2024-08-06 17:17:02 发布
最新推荐文章于 2024-08-06 17:17:02 发布
阅读量1.6w 收藏 12
点赞数 1
分类专栏： html webUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NFA_YY/article/details/75089564
版权

第一种方式：

推荐使用这种，兼容性好


		<style>
			.define-table{
				border-collapse:collapse;
				border-spacing:0;
				border-left:1px solid #888;
				border-top:1px solid #888;
			}
			.define-table th,.define-table td{
				border-right:1px solid #888;
				border-bottom:1px solid #888;
				padding:5px 15px;
			}
			.define-table th{
				font-weight:bold;background:#ccc;
			}	
		</style>
		<table class="define-table" width="800" height="200" >
			<tr>
				<td> </td>
				<td> </td>
				<td> </td>
				<td> </td>
			</tr>
			<tr>
				<td> </td>
				<td> </td>
				<td> </td>
				<td> </td>
			</tr>			
			<tr>
				<td> </td>
				<td> </td>
				<td> </td>
				<td> </td>
			</tr>
		</table>










第二种方式：





		<table  width="800" height="200" border="0" cellspacing="1" cellpadding="0" bgcolor="#888">
			<tr bgcolor="#FFFFFF">
				<td> </td>
				<td> </td>
				<td> </td>
				<td> </td>
			</tr>
			<tr bgcolor="#FFFFFF">
				<td> </td>
				<td> </td>
				<td> </td>
				<td> </td>
			</tr>
			<tr bgcolor="#FFFFFF">
				<td> </td>
				<td> </td>
				<td> </td>
				<td> </td>
			</tr>
		</table>






                

        

        

    

  


    

      

        

            

              
                
                  NFA_YY
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
table边框线属性

				
			

			

				

					12-12
				

			

		

		

			
				
表格内外边框线的属性

特备针对表格嵌套表格的时候修改样式比较有用

			
		

	



                

              
                



	

		

			

				
					
利用CSS生成精美细线Table表格无需复杂style代码

				
			

			

				

					09-25
				

			

		

		

			
				
【CSS生成精美细线Table表格】 在网页设计中，创建美观且易于阅读的表格是至关重要的。传统的HTML表格往往需要大量的内联样式或者复杂的内嵌CSS代码来实现理想的效果，这不仅使得代码难以维护，还降低了页面的可读性...

			
		

	



                


  
              

                


	

		

			

				
					
<TABLE>的边线

				
			

			

				

					weixin_34414196的博客
				

				

					05-16
					
					98
					
				

			

		

		

			
				
HTML里面，表格标记<TABLE>有时候还是要用。如果想让它的单元格带上边线，要怎么做呢？这还不容易，border="1"就行鸟。不过，默认情况下，单元格之间有“脊”（cellspacing），边界宽度很粗，不好看。如果将cellspacing=0，然后为<TD>设置样式，border:solid 1px #000;，则单元格相邻部分，边线重叠，出现线条特别粗的情况。...

			
		

	





	

		

			

				
					
HTML画表格table边线重合问题

					
最新发布

				
			

			

				

					一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
				

				

					08-06
					
					997
					
				

			

		

		

			
				
掌握表格边框的处理技巧对于前端开发者来说是非常重要的，尤其是当涉及到复杂的数据展示和布局设计时。通过本文提供的各种示例和技巧，你可以灵活地调整表格边框的样式，使其满足项目的具体需求。当表格的边框设置不当时，可能会导致视觉上的混乱，尤其是在边框宽度不一致或边框颜色不同的情况下。本文将深入探讨这一问题，并提供详细的解决方案，包括 CSS 属性的使用技巧以及一些实用的代码示例。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。来调整单元格之间的间距。

			
		

	



		

			
		



	

		

			

				
					
table 单线条

				
			

			

				

					weixin_30667649的博客
				

				

					11-26
					
					103
					
				

			

		

		

			
				
<style>  .a{   cursor:pointer;   color: blue;   text-decoration:underline;  }  .t {border-collapse:collapse;}   .t td{border:1px solid #999...

			
		

	





	

		

			

				
					
table css线条,Css制作table细线表格

				
			

			

				

					weixin_39932181的博客
				

				

					08-03
					
					422
					
				

			

		

		

			
				
-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>Css制作table细线表格table {border-collapse:collapse; /* 关键属性：合并表格内外边框(其实表格边框有2px，外面1px，里面还有1px哦) */border:solid #999;...

			
		

	





	

		

			

				
					
table画斜线、直线、圆、矩形、圆角矩形、圆弧、多角形、曲线等

				
			

			

				

					
				

				

					05-07
					
					1359
					
				

			

		

		

			
				
table画斜线、直线、圆、矩形、圆角矩形、圆弧、多边形、曲线等
xmlns:v>



无标题文档


v\:*{behavior:url(#default#VML);}   
body,td,th {
font-size: 10pt;
}
-->




模拟投资试算比较分析



    试算过程说明

      ※ 基金的历史净值水平是

			
		

	





	

		

			

				
					
css 细线表格 css制作table细线表格常用属性

				
			

			

				

					09-25
				

			

		

		

			
				
这样可以进一步调整表格的边框布局，比如隐藏横向边框以创建更细的线条效果。  接下来，我们关注表格的单元格（`th`和`td`）。为了保持细线，我们需要在单元格级别应用边框。`border:solid #999;`和`border-width:0 ...

			
		

	





	

		

			

				
					
CSS实现表格细边框的两种方法

				
			

			

				

					12-13
				

			

		

		

			
				
总的来说，CSS实现表格细边框的方法提供了更多的设计灵活性，可以根据需求选择适合的方案。第一种方法简单直接，适用于大多数情况，但可能在某些旧版本的浏览器中存在兼容性问题。第二种方法利用颜色差异，可以在不...

			
		

	





	

		

			

				
					
el-table表格边框线条颜色背景色

				
			

			

				

					06-10
				

			

		

		

			
				
el-table 是 Element UI 中的表格组件，可以通过 CSS 样式来设置表格的边框线条颜色和背景色。以下是设置表格边框线条颜色和背景色的 CSS 样式：  1. 设置表格边框线条颜色：  ```css .el-table__header-wrapper {  ...

			
		

	





	

		

			

				
					
table细线表格

				
			

			

				

					那个谁的空间
				

				

					05-04
					
					1494
					
				

			

		

		

			
				
登陆信息

			
		

	





	

		

			

				
					
element-ui table 线条问题

				
			

			

				

					weixin_39345613的博客
				

				

					08-16
					
					264
					
				

			

		

		

			
				
element-ui  table 存在线条遮挡重复问题。

			
		

	





	

		

			

				
					
使用HTML的table标签编写细线表格

				
			

			

				

					2301_77451378的博客
				

				

					06-14
					
					622
					
				

			

		

		

			
				
HTML中使用标签编写细线表格。通过使用标签的cellspacing属性、cellpadding属性、background-color、border达到制作细线表格的需求。

			
		

	





	

		

			

				
					
table(表格)边框改为细线

				
			

			

				

					qq_69761234的博客
				

				

					05-23
					
					1922
					
				

			

		

		

			
				
上一个文章中介绍了table(表格)的一些基本属性，但是制作出来的是边框挺不美观的如下：

在补充两个属性：

    colspan  水平方向单元格的合并

     rowspan 上线方向单元格的合并


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body...

			
		

	





	

		

			

				
					
Table表格横竖线实现Css

				
			

			

				

					weixin_30632899的博客
				

				

					10-12
					
					509
					
				

			

		

		

			
				
.tablel 
{
border-collapse:collapse; /* 关键属性：合并表格内外边框(其实表格边框有2px，外面1px，里面还有1px哦) */
border:solid #999; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */
border-width:1px 0 0 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px...

			
		

	





	

		

			

				
					
用js修改控制无id属性的table和div的边框属性,粗细

				
			

			

				

					iteye_18818的博客
				

				

					09-16
					
					418
					
				

			

		

		

			
				
转载自：http://heisetoufa.iteye.com/blog/397269
 
关键字: js javascript 修改 控制 id 属性 table div 边框 粗细 



Js代码  


var table = document.getElementsByTagName("table");  //查找页面所有table标签     
           ...

			
		

	





	

		

			

				
					
table边框改为细线

				
			

			

				

					.NET 人工智能实践
				

				

					07-23
					
					1575
					
				

			

		

		

			
				
table边框改为细线

			
		

	





	

		

			

				
					
css table中细线条以及线条间距问题

				
			

			

				

					qq_44353287的博客
				

				

					04-17
					
					1160
					
				

			

		

		

			
				
css table中细线条以及线条间距问题
今天在学习使用js动态生成table，发现了以下容易犯错的地方
首先是线条问题，很明显图中的线条不是我们想要的细线条，这实在太丑了…

那么怎么实现细线条呢，先分析一下为什么会出现这样的丑线条。
我们先给table添加了一个border，这样表格外围就会出现一个边框，但表格内的td并没有设置到，于是又给td设置了border，那问题来了，默认情况下td与...

			
		

	





	

		

			

				
					
table添加实线的边框线

				
			

			

				

					weixin_42588672的博客
				

				

					01-06
					
					2427
					
				

			

		

		

			
				
可以使用 HTML 中的 style 属性来添加实线边框线。例如：
<table style="border: 1px solid black">
  <!-- 表格内容 -->
</table>

这样就可以在表格中添加一条粗细为 1 像素、颜色为黑色的实线边框线了。
你也可以使用其他的样式属性来调整边框的样式，例如 border-color 属性来调整边框的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值