html - 内阴影和交替的单元格颜色

Question

这是我的目标

如何使用 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>

Answer 1

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
}
​

演示

Answer 2

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>