欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。 网站托管 桌面收藏 网站定制

361源码网

当前位置:361源码网 > 技术文档 > 程序代码 > CSS实现table表格tr单双行颜色相间而不同
这篇文章主要为大家详细介绍了CSS实现table表格tr单双行颜色相间而不同,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

CSS实现table表格tr单双行颜色相间而不同

如上图的颜色间隔效果,table表格如何实现呢?下面就跟着361模板网来学习一下吧。

本期主讲主题:CSS实现table表格tr单双行颜色相间而不同

一、一般的办法:先定义2个不同的class,然后每行 tr 均设置其class

这是可以达到要求的,但是代码就比较多,如下代码所示:

<style type="text/css">
  .tr1{background-color:#F5F5F5}
  .tr2{background-color:#FFFFFF}
</style>
<table>
  <tr class="tr1"><td>...</td></tr>
  <tr class="tr2"><td>...</td></tr>
  <tr class="tr1"><td>...</td></tr>
  <tr class="tr2"><td>...</td></tr>
</table>

我们只所有使用CSS就是为了节省代码,要达到table表格tr单双行颜色相间而不同的要求也一样,css提供了针对性的写法,

二、CSS统一书写代码

代码如下:

<style type="text/css">
table tr:nth-child(odd) {
  background-color:#F5F5F5;
}
table tr:nth-child(even) {
  background-color:#fff;
}
</style>
<table>
  <tr><td>...</td></tr>
  <tr><td>...</td></tr>
  <tr><td>...</td></tr>
  <tr><td>...</td></tr>
</table>

代码提示:代码里 odd even 是定义单双行的样式,其中 odd 是单行,而 even 是双行。

演示实例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS实现table表格tr单双行颜色相间而不同</title>
<style type="text/css">
table.dataintable {
  margin-top:15px;
  border-collapse:collapse;
  border:1px solid #aaa;
  width:100%;
}
table.dataintable th {
  vertical-align:baseline;
  padding:5px 15px 5px 6px;
  background-color:#3F3F3F;
  border:1px solid #3F3F3F;
  text-align:left;
  color:#fff;
}
table.dataintable td {
  vertical-align:text-top;
  padding:6px 15px 6px 6px;
  border:1px solid #aaa;
}
table.dataintable tr:nth-child(odd) {
  background-color:#F5F5F5;
}
table.dataintable tr:nth-child(even) {
  background-color:#fff;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>值</th>
    <th>描述</th>
  </tr>
  <tr>
    <td><i>outline-color</i></td>
    <td>规定边框的颜色。</td>
  </tr>
  <tr>
    <td><i>outline-style</i></td>
    <td>规定边框的样式。</td>
  </tr>
  <tr>
    <td><i>outline-width</i></td>
    <td>规定边框的宽度。</td>
  </tr>
  <tr>
    <td>inherit</td>
    <td>规定应该从父元素继承 outline 属性的设置。</td>
  </tr>
</table>
</body>
</html>

运行效果如下:

CSS实现table表格tr单双行颜色相间而不同

CSS实现table表格tr单双行颜色相间而不同

运行效果查看

以上就是本文的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361源码网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: css odd even属性 table表格

上一篇织梦dedecms一键清空内容回收站SQL命令

下一篇JS实现点击按钮显示或隐藏DIV内容

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在