前端-table表格隔行变色

table表格隔行变色

作为一个后端的我,在某公司无前端工程师时,系统那体验自己用起来都想骂人了。今天就纪录一下,自己在后台经常用到的一个小玩意。

:nth-child(): 定义和用法

:nth-child(n)选择器匹配父元素中的第n个子元素。n可以是一个数字,一个关键字,或者一个公式

使用:nth-child()可以表格数据看起来更加的直观,说到这我就得说说当时的情况:后台表格的数据展现得非常多而且又密集,当我想查一下这第数据是什么类型时,得盯紧它,深怕看到下一行了。
当时是这样的:
前端-table表格隔行变色_第1张图片

当时我就想着,来个前端多好啊,直接就可以交给他了。哈哈~
没办法,我就算想破脑袋他也不来啊,只能自己上手咯。

demo


<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
table, tr, td, th
{
    padding: 0;
    margin: 0;
}
table
{
    width: 100%;
    border-color: #ccc;
}
table tr
{
    line-height: 30px;
    border-color: #ccc;
}
table th, table td{
    text-align: center;
    border-color: #ccc;
}
style>
head>

<body>
<table border="1" cellspacing="0">
    <thead>
        <tr>
            <th>某仓库货架th>
            <th>某仓库货架th>
            <th>某仓库货架th>
        tr>
    thead>
    <tbody>
    <tr>
        <td>太阳能td>
        <td>空气能td>
        <td>电能td>
    tr>
    <tr>
        <td>床头闹钟td>
        <td>床头闹钟td>
        <td>床头闹钟td>
    tr>
    <tr>
        <td>太阳能td>
        <td>空气能td>
        <td>电能td>
    tr>
    <tr>
        <td>床头闹钟td>
        <td>床头闹钟td>
        <td>床头闹钟td>
    tr>
    tbody>
table>
body>
html>

主要核心样式是:二者择其一

/*设置奇数行颜色*/
table tr:nth-child(odd)
{
    background: #ccc;
}
/*设置偶数行颜色*/
table tr:nth-child(even)
{
    background: #ccc;
}

效果图:
这里写图片描述

你可能感兴趣的:(前端)