码迷,mamicode.com
首页 > Web开发 > 详细

各种CSS样式设置细线边框

时间:2014-11-10 23:03:38      阅读:436      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   ar   os   sp   div   on   

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

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

bubuko.com,布布扣
<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>
View Code

style样式设置背景颜色重叠实现的细线效果

bubuko.com,布布扣
<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 />
View Code
bubuko.com,布布扣
<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 />
View Code

设置元素的style = "border-collapse:collapse;" bordercolor = "#000000"  cellpadding="0" cellspacing="0"

bubuko.com,布布扣
<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 />
View Code

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

bubuko.com,布布扣
<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 />
View Code

 

各种CSS样式设置细线边框

标签:style   blog   http   color   ar   os   sp   div   on   

原文地址:http://www.cnblogs.com/YiZhiZaiNvLi/p/4088241.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!