html - 如何将表格样式设置为看起来像 gridview

Question

我在 HTML 中创建了一个表在 <div> 里面标签。下面是表格的代码:

<div id="cont-lef">
    <table align="center" cellpadding="5px" border="1" id="myGridStyle">
       <tr>
          <td><p>Sunday Mornings</td>          
          <td><p>Rs 2.5 lakhs + ST</td>          
       </tr>
       <tr>
          <td><p>Saturday &Sunday Afternoons</td>          
          <td><p>Rs 2.0 lakhs + ST</td>          
       </tr>
       <tr>
          <td><p>Weekdays  </td>
          <td><p>Rs 1.5 lakhs + ST</td>          
       </tr>
       <tr>
          <td><p>Tournament Management</td>          
          <td><p>Rs. 25,000 + ST</td>          
       </tr>        
       <tr>
          <td><p>Caddy Fee</td>          
          <td><p>Rs. 300 per caddy</td>          
       </tr>                     
    </table>
</div>  

现在我想使用 CSS 设置样式看起来像GridView .我不需要网格的任何分页 或搜索选项。我只想将所有偶数行更改为绿色和像网格一样的边框。我该怎么做？

Answer 1

我想指出您的 HTML 无效，您没有关闭任何 p 标签。所以请考虑先这样做。选择偶数行，你可以使用 :nth- pseudo like

table tr:nth-child(even) {
   background: green;
}

关于 GridView ，我相信您需要虚线边框作为您的表，所以您应该使用

table tr td {
   border: 1px dotted #aaa;
}

Demo

不要忘记使用折叠表格边框

table {
    border-collapse:collapse;
}