Comment styler une table pour qu'elle ressemble à gridview - html, css, html-table

J'ai une table créée en HTML à l'intérieur d'un <div> étiquette. Ci-dessous le code de la table:

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

Maintenant, je veux coiffer cela en utilisant CSS ressembler à un GridView. Je n'en ai pas besoin pagination ou Options de recherche de la grille. Je veux juste changer toutes les lignes même pour avoir la couleur verte et la bordure comme une grille. Comment puis-je faire ceci?

Réponses:

4 pour la réponse № 1

Je tiens à souligner que votre HTML est invalide, vous ne fermez aucun des p balises .. alors envisagez de le faire en premier .. En ce qui concerne la sélection des lignes paires, vous pouvez utiliser :nth- pseudo comme

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

Et à propos de la vue en grille, je crois que vous voulez lignes en pointillés pour votre table alors vous devriez utiliser

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

Démo

Ne pas oublier de collapse la table frontières en utilisant

table {
border-collapse:collapse;
}

---

1 pour la réponse № 2

Pour even lignes d'avoir green couleur, faites juste:

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

---

1 pour la réponse № 3

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

Et aussi enlever "frontière = 1"de html

Fidddle

---

1 pour la réponse № 4

S'il vous plaît jeter un oeil ici, cela pourrait-il mieux vous chercher

http://cssglobe.com/lab/tablecloth/

---

0 pour la réponse № 5

Je pensais que quand tu voulais gridview tu voulais dire comme Android grid view? Des boîtes de choses?

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

Je ne sais pas si c'est ce que vous recherchez. Veuillez modifier les couleurs / valeurs / supprimer les ombres si vous le souhaitez.

Également une note, vous voudrez peut-être fermer vos balises <p>. Et puisque vous souhaitez utiliser css, vous pouvez également supprimer certains attributs de la balise <table>.

---