DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 兼容浏覽器的網頁細線表格設計
兼容浏覽器的網頁細線表格設計
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:細線表格如果單純設置邊框,很難保證浏覽器兼容。常見的做法是利用 CSS2 的 "border-collapse:collapse;" 屬性合並表格邊框;並對 table 元素設置左邊框和上邊框,對 th 和 td 元素設置右邊框和下邊框。

細線表格如果單純設置邊框,很難保證浏覽器兼容。常見的做法是利用 CSS2 的 "border-collapse:collapse;" 屬性合並表格邊框;並對 table 元素設置左邊框和上邊框,對 th 和 td 元素設置右邊框和下邊框。

Markup:

<table>
    <tr>
        <th>table head (row1, col1)</th>
        <th>table head (row1, col2)</th>
        <th>table head (row1, col3)</th>
    </tr>
    <tr>
        <td>table data (row1, col1)</td>
        <td>table data (row1, col2)</td>
        <td>table data (row1, col3)</td>
    </tr>
    <tr>
        <td>table data (row2, col1)</td>
        <td>table data (row2, col2)</td>
        <td>table data (row2, col3)</td>
    </tr>
</table>

CSS:

table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;background:#efefef;}
th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}
th{font-weight:bold;background:#ccc;}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved