在表中使用div:如何在两列或多列之间交替使用行颜色

我已经非常成功地使用div创建了一个表，并让列交替使用颜色。不过，我试着交替行。我知道我很接近了，但我现在是在碰壁。这里有相当多的代码，所以我创建了一个jsfiddle.net项目来保存这些代码，你可以看到我得到的结果。

。这里是链接jsFiddle

HTML:

<body>
<div>
    <div class="list-table">
        <div class="title top">Membership List</div>
        <div class="heading-row">
            <div class="col-heading-1 col-background">Mbr ID</div>
            <div class="col-heading-2 col-background">Member Name</div>
            <div class="col-heading-3 col-background">Member Email</div>
            <div class="col-heading-4 col-background">Action</div>
        </div>
        <div class="clear"></div>
        <div class="detail">
            <div class="col-1">1</div>
            <div class="col-2">John Doe</div>
            <div class="col-3">jd@johndoe.com</div>
            <div class="col-4">Delete</div>
            <div class="col-5">Edit</div>
        </div>
        <div class="clear"></div>
        <div class="detail">
            <div class="col-1">2</div>
            <div class="col-2">John Wayne</div>
            <div class="col-3">jw@jw.com</div>
            <div class="col-4">Delete</div>
            <div class="col-5">Edit</div>
        </div>
        <div class="clear"></div>
        <div class="detail">
            <div class="col-1">3</div>
            <div class="col-2">Sally Smith</div>
            <div class="col-3">sally@sallysmith.com</div>
            <div class="col-4">Delete</div>
            <div class="col-5">Edit</div>
        </div>
        <div class="clear"></div>
        <div class="title bottom">End of data</div>
    </div>
</div>

CSS:

.list-table {
width: 800px;
margin: 0 auto;
}
.list-table .title {
    width: 100%;
    font-size: large;
    font-weight: bolder;
    text-align: center;
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #2AA6FF 0%, #A5F0EF 50%, #2AA6FF 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #2AA6FF 0%, #A5F0EF 50%, #2AA6FF 100%);
    /* Opera */
    background-image: -o-linear-gradient(top, #2AA6FF 0%, #A5F0EF 50%, #2AA6FF 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, 2AA6FF),     color-stop(0.5, #A5F0EF), color-stop(1, #2AA6FF));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #2AA6FF 0%, #A5F0EF 50%, #2AA6FF 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to bottom, #2AA6FF 0%, #A5F0EF 50%, #2AA6FF 100%);
}
.list-table .top {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;    
}
.list-table .bottom {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.list-table .heading-row {
}
.list-table .heading-row .col-heading-1 {
    width: 10%;
    font-size: small;
    text-align: center;
    vertical-align: middle;
    float: left;
}
.list-table .heading-row .col-heading-2 {
    width: 35%;
    font-size: small;
    text-align: center;
    vertical-align: middle;
    float: left;
}
.list-table .heading-row .col-heading-3 {
    width: 35%;
    font-size: small;
    text-align: center;
    vertical-align: middle;
    float: left;
}
.list-table .heading-row .col-heading-4 {
    width: 20%;
    font-size: small;
    text-align: center;
    vertical-align: middle;
    float: left;
}
.list-table .heading-row .col-background {
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #808080 0%, #D3D3D3 50%, #808080 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #808080 0%, #D3D3D3 50%, #808080 100%);
    /* Opera */
    background-image: -o-linear-gradient(top, #808080 0%, #D3D3D3 50%, #808080 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #808080), color-stop(0.5, #D3D3D3), color-stop(1, #808080));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #808080 0%, #D3D3D3 50%, #808080 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to bottom, #808080 0%, #D3D3D3 50%, #808080 100%);
}
.list-table .clear {
    clear: both;
}
.list-table .detail {
    background-color: #eee;
}
.list-table .detail div:nth-child(odd) {
    background-color:#eee;
}
.list-table .detail div:nth-child(even) {
    background-color:#fff;
}
.list-table .detail .col-1 {
    width: 10%;
    text-align: center;
    float: left;
}
.list-table .detail .col-2 {
    width: 35%;
    float: left;
}
.list-table .detail .col-3 {
    width: 35%;
    float: left;
}
.list-table .detail .col-4 {
    width: 10%;
    text-align: center;
    float: left;
}
.list-table .detail .col-5 {
    width: 10%;
    text-align: center;
    float: left;
}

我猜这正是你要找的。

为了使事情更简单，我已经采取了所有的"行"，并把它放在一个名为"行"的容器div。我还应用了你想要的背景颜色，以及保留备用颜色。我已经添加了边距和内边距，使颜色明显(我知道它看起来不太好，但这是为了说明目的)。

下面是我使用的2个CSS类:

.detail {
    background-color: Gray;
    color: Blue;
    height:20px;
    width:100%;
    padding:25px 0;
}
.rows > div:nth-child(4n) {
    background-color:Orange;
    color: red;
}

我修改了(只是添加了一个叫做row的容器，如前所述)HTML如下:

<div class="rows">
            <div class="clear"></div>
            <div class="detail">
                <div class="col-1">1</div>
                <div class="col-2">John Doe</div>
                <div class="col-3">jd@johndoe.com</div>
                <div class="col-4">Delete</div>
                <div class="col-5">Edit</div>
            </div>
..Other 'detail' classes
</div>

您可以在这里查看:http://jsfiddle.net/8bLUH/1/

这个想法是，我已经给了你两个备用类名为'detail' (奇数行)和行。Div:n -child(4n) (偶数行)。

希望这有帮助!!

我现在在想…嗯…对于这个答案来说，是一个表还是一个div(但表格数据值得一个表)并不重要:

为什么不在创建html的循环中添加一个类来标记偶数/奇数行呢?(div class="detail" vsdiv class="detail even"…)

然后在css中根据自己的喜好给它们上色…

.even{background-color: #DDDDAA}
.odd{background-color: #BBBBFF}

这个解决方案不是完美的，但会给您一些东西。把它添加到样式的底部:

.list-table > div:nth-child(4n) {
   color: red;
}

这将设置每四个div的文本颜色为红色。这将看起来像一个交替行，因为表中的每个"行"都有一个"clear"div和一个"detail"div。

你可以使用JQuery，它变得很容易:

例子

$(function(){
    var count = 0;
    var baseColor = true;
    $(".detail > div").each(function(){
        count++;
        if (baseColor){
            $(this).css("background-color", "#BCEAEF");
        }
        if (count > 4){  // 4 is the number of columns - 1
            count = 0;
            if (baseColor){
                baseColor = false;
            }
            else{
                baseColor = true;
            }
        }        
    });
});

相关内容

最新更新

热门标签：