各种CSS样式设置细线边框
基础知识回顾 : cellspacing:单元格与单元格之间的边距;cellpadding:单元格内的内容与单元格边沿的边距
简单实用的样式,设置所有的单元格为细线效果
<style type="text/css"> #tab1{ border-collapse:collapse;} #tab1 td{ border:1px solid #000000;} </style> <table width = "640px" id = "tab1"> <tr> <td> 韦德 </td> <td> 罗尔-邓 </td> </tr> <tr> <td> 波什 </td> <td> 雷-阿伦 </td> </tr> </table>
style样式设置背景颜色重叠实现的细线效果
<style type="text/css"> /*定义表格的背景颜色,也就是边框的颜色*/ .table1{ background:black;} /*定义表格内单元格的背景为白色,细线出现*/ .table1 td,.table1 th{ background:#ffffff} </style> <table width = "80%" cellspacing = "1" border = "0" class = "table1"> <tr> <td> 热火 </td> <td> 火箭 </td> </tr> <tr> <td> 热火 </td> <td> 火箭 </td> </tr> </table> <br />
<style type="text/css"> #tab{ background-color:#000000;} #tab tr{ background-color:#ffffff} #tab td{ background-color:#ffffff} </style> <table id = "tab" width = "640px" border="0" cellpadding="1" cellspacing="1"> <tr> <td> 韦德 </td> <td> 罗尔-邓 </td> </tr> <tr> <td> 波什 </td> <td> 雷-阿伦 </td> </tr> </table> <br />
设置元素的style = "border-collapse:collapse;" bordercolor = "#000000" cellpadding="0" cellspacing="0"
<table width = "640px" border="1" bordercolor = "#000000" cellpadding="0" cellspacing="0" style = "border-collapse:collapse;"> <tr> <td> 韦德 </td> <td> 罗尔-邓 </td> </tr> <tr> <td> 波什 </td> <td> 雷-阿伦 </td> </tr> </table> <br />
只显示外层边框实线,内层实线不显示
<table width = "640px"cellpadding="0" cellspacing="0" style = " border:#000000 1px solid ;"> <tr> <td> 韦德 </td> <td> 罗尔-邓 </td> </tr> <tr> <td> 波什 </td> <td> 雷-阿伦 </td> </tr> </table> <br />
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。