css3 條紋化和透明化表格Firefox下測試成功

2024-07-11 08:31:10

字體：大中小

來源：轉載

供稿：網友

使用class來條紋化表格，需要在html中將表格中每一行都按<tr><td></td></tr>寫出，非常麻煩。

CSS3中的偽類渲染更能很好地定位頁面元素。

然而有時即使你按照css3格式來寫，在瀏覽器中卻顯示不出相應的效果，這時就需要考慮瀏覽器的兼容問題。

目前，全盤支持 CSS3 屬性的瀏覽器有 Chrome 和 Safari，而且不管是 Mac 平臺還是 Windows 平臺全支持。

博主先用IE沒有成功，后用Firefox成功。

現附上條紋化表格的代碼：

html:

復制代碼

代碼如下:
<table>
<thead>
<tr>
<th>Synonym</th>
<th>Cosine</th>
</tr>
</thead>
<tbody>
{% for w in words %}
<tr>
<td>{{ w.0}}</td><td>{{ w.1}}</td>
</tr>
{% endfor %}
</tbody>
</table>

css:rbga(,,,)最后一個參數是調整透明度

復制代碼

代碼如下:
table{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:70%;
border-collapse:collapse;
position:relative;
left:50px;
}
thead th{
font-size:1.2em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#663366;
color:#ffffff;
border:1px solid #990099;
padding:3px 7px 2px 7px;
}
tbody tr,td{
font-size:1em;
border:1px solid #990099;
padding:3px 7px 2px 7px;
}
tbody tr:nth-of-type(even){
background-color:rgba(138,43,226,0.2);
}
tbody tr:nth-of-type(odd){
background-color:rgba(169,169,169,0.2);
}

最后的效果圖：