如何利用CSS生成Table表格

本篇內(nèi)容主要講解“如何利用CSS生成Table表格”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何利用CSS生成Table表格”吧!

成都創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)按需求定制設(shè)計(jì)，是成都網(wǎng)站設(shè)計(jì)公司,為成都宣傳片制作提供網(wǎng)站建設(shè)服務(wù),有成熟的網(wǎng)站定制合作流程，提供網(wǎng)站定制設(shè)計(jì)服務(wù)：原型圖制作、網(wǎng)站創(chuàng)意設(shè)計(jì)、前端HTML5制作、后臺(tái)程序開(kāi)發(fā)等。成都網(wǎng)站制作熱線：18982081108

精美的表格是前端開(kāi)發(fā)用到的一個(gè)組件，很多時(shí)候我們利用復(fù)雜的頁(yè)面style代碼，來(lái)生成這樣的表格，造成了頁(yè)面的修改性和可讀性都非常差。這里推薦直接使用css來(lái)產(chǎn)生一個(gè)細(xì)線表格。

使用方法也很簡(jiǎn)單：

第一：導(dǎo)入table.css

代碼如下:

第二：套用格式

代碼如下:

您只需要給table設(shè)置樣式class="table"即可，不需要對(duì)任何的tr，td做操作。您也可以寫(xiě)成

style="width:600px"是為了更靈活的控制表格的寬度，如果直接寫(xiě)到table.css里自然也沒(méi)有問(wèn)題；如果您打算讓td有有背景顏色，只需要設(shè)置td的樣式class="color"即可。當(dāng)然其實(shí)可以在css里面利用表達(dá)式直接設(shè)置成隔行變色，不過(guò)那樣做會(huì)降低頁(yè)面的效率，不推薦在css中使用表達(dá)式。

如果大家想對(duì)樣式進(jìn)行微調(diào)，只需要調(diào)整table.css即可，不需要改任何的頁(yè)面html代碼。如果大家想修改邊框的顏色，請(qǐng)?jiān)趖able.css中找到色值：#ADD8E6，然后全部替換成自己想要的色值即可。附件是一個(gè)具體的例子。

table.css源碼：

代碼如下:

/*表格樣式。*/
.table {
width:100%;
padding: 0px;
margin: 0px;
font-family:Arial, Tahoma, Verdana, Sans-Serif,宋體;
border-left:1px solid #ADD8E6;
border-collapse:collapse;
}
/*表頭樣式。*/
.table th {
font-size:12px;
font-weight:600;
color: #303030;
border-right: 1px solid #ADD8E6;
border-bottom: 1px solid #ADD8E6;
border-top: 1px solid #ADD8E6;
letter-spacing: 2px;
text-align: left;
padding: 10px 0px 10px 0px;
background: url(../images/tablehdbg.png);
white-space:nowrap;
text-align:center;
overflow: hidden;
}
/*單元格樣式。*/
.table td {
border-right: 1px solid #ADD8E6;
border-bottom: 1px solid #ADD8E6;
background: #fff;
font-size:12px;
padding: 3px 3px 3px 6px;
color: #303030;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
}
/*藍(lán)色單元格樣式，主要用于隔行變色。*/
.table td.color{
background:#edf7f9;
}
/*表格中超級(jí)鏈接樣式。*/
.table td a:link{
font-weight:400 ;
color:#2259D7 ;
text-decoration:none ;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
}
.table td a:visited {
font-weight:400 ;
color:#2259D7 ;
text-decoration:none ;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
}
.table td a:hover {
font-weight:400 ;
text-decoration:underline ;
color: #303030;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
}
.table td a:active {
font-weight:400 ;
text-decoration:none ;
color:#2259D7 ;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
}

到此，相信大家對(duì)“如何利用CSS生成Table表格”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章名稱(chēng)：如何利用CSS生成Table表格
網(wǎng)站地址：http://weahome.cn/article/pjghco.html