CSS - 从第3行开始的样式

时间:2016-10-20 15:55:47

标签: css

我有一个HTML页面,其中包含使用<TABLE>格式显示的记录。格式化由CSS表格控制(见下文)。我有3个要求,能够达到前两个,而对于最后一个,需要知道如何做到这一点..

  1. 不同的标题 - 已完成

  2. 备用行着色 - 已完成

  3. 来自第3行的第四列,应该有不同的背景颜色 - 我可以更改完整列背景颜色,但不能从病房的第3行开始..任何想法如何从CSS获取?

  4. desired output

    (附图是我想要实现的)

    &#13;
    &#13;
    table.Event-table {
        width:100%;
        padding-left: 2px;
        border: 1px solid #ddd;
    }
    
    /*border and text alignment*/
    .Event-table  tr td {
        text-align:center ;
        padding-left:10px;
        border: 1px solid #ddd !important;
    }
    
    /*Alternte background colour*/
    .Event-table  tr:nth-child(2n+1) {background: #e7f7ff }
    .Event-table  tr:nth-child(2n+2) {background: #fff}
    
    
    /*Header Row*/
    .Event-table tr:nth-child(1) {
        font-weight : bold;
        text-align:center;
        color: #000;
        background-color : #d9edf7 ;
        border : 1px solid #ddd !important;
    }
    
    /*Select forth column, but from second row onwards*/
    .Event-table td:nth-child(4) {
        background-color : #eab6f8;
    }
    &#13;
    &#13;
    &#13;

1 个答案:

答案 0 :(得分:0)

这样的事情?我从w3schools中随机选择了一个小表(编辑为你设置正确的列/行索引)。

<?php $key_values = get_post_meta( get_the_ID(), 'property_bathrooms' ); ?>

https://jsfiddle.net/2v3ahoeu/