Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

给表格整列设置样式

  首先,我们需要一个表格 <table>
  <tr>
    <td>临</td><td>兵</td><td>斗</td>
  </tr>
  <tr>
    <td>者</td><td>皆</td><td>阵</td>
  </tr>
  <tr>
    <td>列</td><td>在</td><td>前</td>
  </tr>
</table>
  在现代浏览器中,我们可以直接在td标签上使用first-child伪类来选择第一列,或者用nth-child(n)伪类来选择第n列。 td:first-child {color:red;}
td:nth-child(2) {color:green;}

  这个方法虽然很好用,但是不被低版本浏览器兼容。所以需要使用其它方法来做兼容。在HTML标签中有个叫做COL的标签,它是用来作用表格整列的虚标签。在表格中插入这些标签就可以通过操作他们来控制表格整列的样式了。
<style>
td:first-child {color:red;}
td:nth-child(2) {color:green;}
.col1 {color:red;}
.col2 {color:green;}
</style>
<table>
  <col class="col1" /><col class="col2" />
  <tr>
    <td>临</td><td>兵</td><td>斗</td>
  </tr>
  <tr>
    <td>者</td><td>皆</td><td>阵</td>
  </tr>
  <tr>
    <td>列</td><td>在</td><td>前</td>
  </tr>
</table>
  这样就可以兼容到低版本浏览器了,也许你会奇怪。为什么还需要用伪类去设置现代浏览器呢?这是因为现代浏览器中对COL标签的兼容已经是半瘫痪了,说不定之后的几个版本就会废弃它。所以我们需要同时使用伪类和COL来兼容新旧浏览器。
网名:
54.226.58.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^