Heim > Artikel > Web-Frontend > Zwei CSS-Implementierungsmethoden für dünne Tabellenränder

Zwei CSS-Implementierungsmethoden für dünne Tabellenränder

巴扎黑Original: 2017-04-05 09:46:17975Durchsuche

Bei der Webseitenproduktion ist die Produktionsmethode dünner Ränder von wesentlicher Bedeutung. Hier stellt admin10000.com zwei gängige Methoden zum Erstellen dünner Tabellenränder vor, die beide die XHTML-Überprüfung bestehen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>表格细边框的两种CSS实现方法</title>
        <style type="text/css">
                /* 利用表格样式 border-collapse: collapse 实现细边框 */
                .tab1
                {
                        width: 300px;
                        height: 200px;
                        border: 1px solid #ccc;
                        border-collapse: collapse;
                }
                .tab1 td, .tab1 th
                {
                        border: 1px solid #ccc;
                        padding: 5px;
                }
                /* 利用表格样式 border-spacing:0px; 和表格与单元格背景色的不同来实现细边框。
                 IE7及更早浏览器不支持border-spacing属性，可以通过table的标签属性cellspacing来替代。*/
                .tab2
                {
                        width: 300px;
                        height: 200px;
                        background-color: #ccc;
                        border-spacing: 1px;
                }
                .tab2 td, .tab2 th
                {
                        background-color: #fff;
                }
        </style> 
</head> 
<body>
        第一种 （通过XHTML验证）
        <table class="tab1">
                <thead>
                        <tr>
                                <th>
                                        表头
                                </th>
                                <th>
                                        表头
                                </th>
                        </tr>
                </thead>
                <tr>
                        <td>
                                Admin10000.com
                        </td>
                        <td>
                                Admin10000.com
                        </td>
                </tr>
                <tr>
                        <td>
                                Admin10000.com
                        </td>
                        <td>
                                Admin10000.com
                        </td>
                </tr>
        </table>
        <br />
        <br />
        第二种 （通过XHTML验证）
        <table class="tab2">
                <thead>
                        <tr>
                                <th>
                                        表头
                                </th>
                                <th>
                                        表头
                                </th>
                        </tr>
                </thead>
                <tbody>
                        <tr>
                                <td>
                                        Admin10000.com
                                </td>
                                <td>
                                        Admin10000.com
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        Admin10000.com
                                </td>
                                <td>
                                        Admin10000.com
                                </td>
                        </tr>
                </tbody>
        </table> 
</body> 
</html>

Zugehörige Dokumente: Verwenden Sie die CSS-Hack-Technologie, um Browserkompatibilitätsprobleme zu lösen

Das obige ist der detaillierte Inhalt vonZwei CSS-Implementierungsmethoden für dünne Tabellenränder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：10 CSS3-Animationsbibliotheken, die es wert sind, gesammelt zu werdenNächster Artikel：10 CSS3-Animationsbibliotheken, die es wert sind, gesammelt zu werden

In Verbindung stehende Artikel

Mehr sehen