各種CSS樣式設定細線邊框

標籤：style   blog   http   color   ar   os   sp   div   on   

基礎知識回顧 : 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>

View Code

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 />

View Code

<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"

<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

只顯示外層邊框實線，內層實線不顯示

<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樣式設定細線邊框