科技知識動態：css怎么設置表格樣式？css設置表格樣式的方法

2021-05-18 23:29:14

導讀跟大家講解下有關css怎么設置表格樣式？css設置表格樣式的方法，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說css怎么設置

跟大家講解下有關css怎么設置表格樣式？css設置表格樣式的方法，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說css怎么設置表格樣式？css設置表格樣式的方法，小編也收集到了有關css怎么設置表格樣式？css設置表格樣式的方法的相關資料，希望大家看到了會喜歡。

一個簡單的表格有時會感覺很單調，那么怎么給css表格加樣式呢？本篇文章就給大家介紹關于css表格樣式的設置方法。

1、一個簡單的表格 table.html

<!doctype html><html><head> <meta charset="utf-8"> <title>表格樣式</title> <link href="box.css" type="text/css" rel="stylesheet"></head><body> <center> <table class="class"> <caption>課程表</caption> <tr> <th>星期\課程</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> <tr> <th>1-2節</th> <td>數學</td> <td>語文</td> <td>化學</td> <td>英語</td> <td>英語</td> </tr> <tr> <th>3-4節</th> <td>英語</td> <td>物理</td> <td>化學</td> <td>英語</td> <td>體育</td> </tr> <tr> <th>5-6節</th> <td>數學</td> <td>物理</td> <td>體育</td> <td>化學</td> <td>美術</td> </tr> <tr> <th>7-8節</th> <td>數學</td> <td>美術</td> <td>化學</td> <td>英語</td> <td>體育</td> </tr> <tr> <th>9-10節</th> <td>生物</td> <td>美術</td> <td>生物</td> <td>英語</td> <td>物理</td> </tr> </table> </center> </body></html>

table.css

table,td,th{ border:1px solid #aaa; font-size: 23px; }

2、邊框合并：boder-collapse 屬性值： separate;（分開，默認） collapse;（合并）

table.css

table,td,th{ border:1px solid #aaa; font-size: 23px; border-collapse:collapse; }

3、邊框間距border-spacing(前提是：border-collapse:separate;)

table.css

table,td,th{ border:1px solid #aaa; font-size: 23px; border-collapse:separate; border-spacing: 45px; }

4、設置表格標題的位置caption-side 屬性值： top;//默認 bottom; left; right;

table.css

table,td,th{ border:1px solid #aaa; font-size: 23px; border-collapse:separate; border-spacing: 45px; caption-side:bottom; }

5、當單元格對象寬度超過單元格所定義的寬度時，可用table-layout：fixed保持表格寬度不被改變屬性值：auto(默認) fixed(寬度固定) table.css