溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“css如何設置表格樣式”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css如何設置表格樣式”這篇文章吧。
1、一個簡單的表格
table.html
<!doctypehtml><html><head>
<metacharset="utf-8">
<title>表格樣式</title>
<linkhref="box.css"type="text/css"rel="stylesheet"></head><body>
<center>
<tableclass="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:1pxsolid#aaa;
font-size:23px;
}
2、邊框合并：boder-collapse
屬性值：
separate;（分開，默認）
collapse;（合并）
table.css
table,td,th{
border:1pxsolid#aaa;
font-size:23px;
border-collapse:collapse;
}
3、邊框間距border-spacing(前提是：border-collapse:separate;)
table.css
table,td,th{
border:1pxsolid#aaa;
font-size:23px;
border-collapse:separate;
border-spacing:45px;
}
4、設置表格標題的位置caption-side
屬性值：
top;//默認
bottom;
left;
right;
table.css
table,td,th{
border:1pxsolid#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:1pxsolid#aaa;
font-size:23px;
border-collapse:separate;
border-spacing:5px;
table-layout:fixed;
caption-side:top;
}
以上是“css如何設置表格樣式”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
