Skip Navigation

[Resolved] Zebra Table

This support ticket is created 7 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 -
- 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

Tagged: 

This topic contains 1 reply, has 2 voices.

Last updated by Noman 7 years, 2 months ago.

Assisted by: Noman.

Author
Posts
#575311

Hi i want to create zebra table in search results:

this is a html:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<table width="100%">
<thead>
<tr>
<th>[wpv-heading name="post-link"]כותרת[/wpv-heading]</th>
<th>[wpv-heading name="types-field-num_hozer"]מספר החוזר[/wpv-heading]</th>
<th>[wpv-heading name="types-field-select-a48cc259"]שנה[/wpv-heading]</th>
</tr>
</thead>
<tbody class="wpv-loop js-wpv-loop">
<wpv-loop>
[wpv-item index=1]<tr class="ODD">
[wpv-post-body view_template="Loop item in חיפוש חוזרים מקצועיים"]
</tr>
[wpv-item index=other]
<tr class="EVEN">
[wpv-post-body view_template="Loop item in חיפוש חוזרים מקצועיים"]
</tr>

</wpv-loop>
</tbody>
</table>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]
where i do something wrong?
Tnx

#575333

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Result.png

1. Please use this code in your View, it will give you result like in attached screenshot:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<table width="100%">
<thead>
<tr>
<th>[wpv-heading name="post-link"]כותרת[/wpv-heading]</th>
<th>[wpv-heading name="types-field-num_hozer"]מספר החוזר[/wpv-heading]</th>
<th>[wpv-heading name="types-field-select-a48cc259"]שנה[/wpv-heading]</th>
</tr>
</thead>
<tbody class="wpv-loop js-wpv-loop tbl-zebra">
<wpv-loop>
<tr>[wpv-post-body view_template="Loop item in חיפוש חוזרים מקצועיים"]</tr>
</wpv-loop>
</tbody>
</table>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

2. And add following css in View’s >> CSS editor section:

 
tbl-zebra tr:nth-child(odd) {
   background-color: #ccc;
}

I hope it helps, Thank you