css怎麼設定表格樣式？ css設定表格樣式的方法
- 不言原創
- 2018-08-18 14:16:105511瀏覽
一個簡單的表格有時會覺得很單調，那要怎麼為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
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:separate;
border-spacing: 5px;
table-layout: fixed;
caption-side:top;
}相關建議：
#精通CSS DIV網頁樣式與佈局設定表單和表格_html/css_WEB-ITnose
以上是css怎麼設定表格樣式？ css設定表格樣式的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn