将DIV用于表：如何将行颜色与两列或更多列交替使用

时间：2014-06-03 20:39:47

标签： css html5

我一直非常成功地使用DIV创建表并使列交替使用颜色。但是，我正在尝试交替行。我知道我很接近，但我现在正撞在墙上。有很多代码，所以我创建了一个包含代码的jsfiddle.net项目，你可以看到我得到的结果。

。Here's the link 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;
}

4 个答案:

答案 0 :(得分：2)

我现在在想......好吧......作为一个桌子或者div（但是表格数据值得一张桌子）对于这个答案并不重要：

为什么不在创建html的循环中添加一个类来标记偶数/奇数行？ （div class =“detail”vs div class =“detail even”...）

然后用css为你想要的颜色...... 

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

答案 1 :(得分：1)

这个解决方案并不完美，但会给你一些合作的东西。将其添加到样式的底部：

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

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

答案 2 :(得分：1)

我想这正是你要找的。

为了使事情更简单，我已经采取了所有＆＃39;行＆＃39;并将其放在称为“行”的容器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/

我的想法是，我已经为您提供了两个名为＆＃39; detail＆＃39; （奇数行）和行。 div：nth-​​child（4n）（偶数行）。您可以在其上应用您想要的任何样式。

希望这有帮助!!!

答案 3 :(得分：0)

您可以使用JQuery，它变得简单：

Example 

$(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;
            }
        }        
    });
});
相关问题
最新问题