您的位置：首页 > Web前端 > CSS

用css来定义table的样式

2008-03-27 11:09 330 查看

div写多了，偶尔遇到table现在还觉得麻烦，又是边框，又是间距什么的，觉得定义太多，看看我遇到的一个table

代码如下：

以下为引用的内容：

<table cellspacing="0" cellpadding="8" width="100%" bordercolor="#C4E2FF" bordercolordark="#FFFFFF" bgcolor="#E8FBFF" border="1">

<tr>

<td align="right" width="17%">QQ号码：</td>

<td align="left" width="83%">123456</td>

</tr>

<tr>

<td align="right">MSN：</td>

<td align="left">123456@1222.com</td>

</tr>

</table>

看看定义挺多的吧，还不兼容，bordercolordark这个在firefox和opera就不行，表格在ie是细线有颜色，到了firefox，opera就变粗变黑，丑死。

试试用css来定义吧，找了一堆网站，被我搞定，代码如下：

以下为引用的内容：

<style>

table{border-collapse:collapse;border:1px solid #C4E2FF;background:#E8FBFF;width:100%;}

td{padding:10px 5px;line-height:40px;border:1px solid #C4E2FF;}

</style>

<table>

<tr>

<td align="right" width="17%">QQ号码：</td>

<td align="left" width="83%">123456</td>

</tr>

<tr>

<td align="right">MSN：</td>

<td align="left">123456@1222.com</td>

</tr>

</table>

注意border-collapse:collapse;是保证在firefox，opera下面细线的关键，并且td要加上border要不然里面就没有线了。

ok，ie/firefox/opera测试通过，把table解放出来真好：）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航