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-伪像

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

关于网格视图，我相信你想要table的虚线边框线，所以你应该使用

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

Demo

不要忘记使用

collapse table个边框

table {
    border-collapse:collapse;
}

Answer 2

要使even行具有green颜色，只需执行：

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

Answer 3

tr:nth-child(odd){background : green}
tr, td{border:1px solid #999}

并从html中删除“ border = 1 ”

<强> Fidddle

Answer 4

我想当你想要gridview时你就像Android网格视图一样？箱子里的东西？

http://jsfiddle.net/jennift/2yFeb/2/

table {
    border-spacing: 20px;
}
td {
    border:1px solid #f00;
    padding:20px;
    width:200px;
    -moz-box-shadow: 2px 2px 2px 2px #aaa;
    -webkit-box-shadow: 2px 2px 2px 2px #aaa;
    box-shadow: 2px 2px 2px 2px #aaa;
}

不确定这是不是你所追求的。如果需要，请更改颜色/值/删除阴影。

另外请注意，您可能希望关闭＆lt; p>标签。既然你想使用css，也可以删除＆lt;中的一些属性。表＆gt;标签

如何将表格样式设置为gridview

4 个答案: