在內陰影和交替單元格顏色

enter image description here

如何做到這一點使用HTML/CSS和下面的代碼貫？

<div class="classname">      
    <table>        
     <tbody>          
     <tr>       <td></td>       <td></td>          
     </tr>          
     <tr>       <td></td>       <td>     
      </td>          
     </tr>          
     <tr>       <td></td>       <td></td>          
     </tr>          
     <tr>       <td></td>       <td></td>          
     </tr>          
     <tr>       <td></td>       <td></td>          
     </tr>          
     <tr>       <td></td>       <td></td>          
     </tr>          
     <tr>       <td></td>       <td>        
     </tbody>       
    </table>                                
    </div>

來源

2012-11-22 Peter Fren

enter image description here CSS

在桌子上小區集合背景顏色。

table { 

    border:1px solid #000; 
    box-shadow: 7px 0px 7px -5px #777 inset,-7px 0px 7px -5px #777 inset; 

} 

table tr td { 

    background:#fff; 
    z-index:-1; 
    position:relative; 

}

HTML

<table border="0" cellpadding="10" cellspacing="0"> 
    <tr> 
    <td>Day</td> 
    <td>Month</td> 
    <td>Year</td> 

    </tr> 
    <tr> 
    <td>$100</td> 
    <td>$1000</td> 
    <td>$1000</td> 
    </tr> 
</table>

來源

2012-11-22 07:38:49 Nandhakumar

不適用交替的顏色。全是白色的。 –

tr：第n個孩子（偶數）td：最後一孩子background-color：＃ccc; } – Nandhakumar

http://jsfiddle.net/K7WvP/2/仍然不起作用。你可以重新創建我的例子嗎？ –

CSS

tr:nth-child(even) td:last-child{ 
    background-color:#ccc; 
    width:80% 
} 
table{ 
-moz-box-shadow: 
     inset 5px 0 5px -2px #ccc, 
     inset -5px 0 5px -2px #ccc; 
    -webkit-box-shadow: 
     inset 5px 0 5px -2px #ccc, 
     inset -5px 0 5px -2px #ccc; 
    box-shadow: 
     inset 5px 0 5px -2px #ccc, 
     inset -5px 0 5px -2px #ccc; 
} 
td{ 
    border-bottom:#ccc solid 1px; 
    border-right:#ccc solid 1px; 
    height:30px 
}

DEMO

來源

2012-11-22 07:06:01 Sowmya

大我還需要這一點。因爲我只通過php – james

做它不看起來像在歌劇。 –

@PeterFren它呢。我檢查了歌劇以及 – Sowmya

在內陰影和交替單元格顏色

回答

相關問題