各种CSS样式设置细线边框

时间:2025-01-27 18:36:56

基础知识回顾 : cellspacing:单元格与单元格之间的边距;cellpadding:单元格内的内容与单元格边沿的边距

简单实用的样式,设置所有的单元格为细线效果

<style type="text/css">
#tab1{ border-collapse:collapse;}
#tab1 td{ border:1px solid #;}
</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 = "" border = "" class = "table1">
<tr>
<td>
热火
</td>
<td>
火箭
</td>
</tr>
<tr>
<td>
热火
</td>
<td>
火箭
</td>
</tr>
</table>
<br />
<style type="text/css">

        #tab{ background-color:#;}
#tab tr{ background-color:#ffffff}
#tab td{ background-color:#ffffff}
</style>
<table id = "tab" width = "640px" border="" cellpadding="" cellspacing="">
<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="" bordercolor = "#000000" cellpadding="" cellspacing="" style = "border-collapse:collapse;">
<tr>
<td>
韦德
</td>
<td>
罗尔-邓
</td>
</tr>
<tr>
<td>
波什
</td>
<td>
雷-阿伦
</td>
</tr>
</table>
<br />

只显示外层边框实线,内层实线不显示

<table width = "640px"cellpadding="" cellspacing="" style = " border:#000000 1px solid ;">
<tr>
<td>
韦德
</td>
<td>
罗尔-邓
</td>
</tr>
<tr>
<td>
波什
</td>
<td>
雷-阿伦
</td>
</tr>
</table>
<br />