---
{
	"title": "Zebra striping",
	"language": "en",
	"category": "Plugins",
	"description": "Zebra striping for tables",
	"tag": "zebra",
	"parentdir": "zebra",
	"altLangPrefix": "zebra",
	"dateModified": "2014-07-20"
}
---

<h2>Striped rows</h2>

<p>The following examples depends on the <a href="https://getbootstrap.com/css/#tables-striped">striped rows</a> functionality available from <strong>Twitter Bootstrap CSS</strong>.</p>


<p><code>&lt;table class=&quot;table table-striped table-hover&quot;&gt;</code></p>

<table class="table table-striped table-hover">
	<caption>Generic Invoice Table</caption>
	<colgroup>
		<col>
		<col>
		<col>
	</colgroup>
	<colgroup>
		<col>
		<col>
	</colgroup>
	<colgroup>
		<col>
	</colgroup>
	<thead>
		<tr>
			<th>Product ID</th>
			<th>Product</th>
			<th>Description</th>
			<th>Quantity</th>
			<th>Unit Price</th>
			<th>Total</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="5">Subtotal</th>
			<td>519.80</td>
		</tr>
		<tr>
			<th colspan="5">Taxes (10%)</th>
			<td>51.98</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="5">Total</th>
			<td>571.78</td>
		</tr>
	</tbody>
</table>





<h2>Complex Table</h2>

<p>Provide visual emphasis on relationship for table that was build with the 12 techniques for tables. Summary group are in gray. Key column and description column are in italic. A delimiter is added for subsequent column group. Row hovering effect on summary row group is in a lighter color. Provide support for column hovering effect.</p>

<p>The <code>hassum</code> options is an indicator for the table parser to allow the support for summary group. The 12 techniques for tables contains explaination on how to build tables with summary group.</p>

<p><code>&lt;table class=&quot;wb-zebra hassum table table-hover&quot;&gt;</code></p>

<table class="wb-zebra hassum table table-hover">
	<caption>Generic Invoice Table</caption>
	<colgroup>
		<col>
		<col>
		<col>
	</colgroup>
	<colgroup>
		<col>
		<col>
	</colgroup>
	<colgroup>
		<col>
	</colgroup>
	<thead>
		<tr>
			<th>Product ID</th>
			<th>Product</th>
			<th>Description</th>
			<th>Quantity</th>
			<th>Unit Price</th>
			<th>Total</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="5">Subtotal</th>
			<td>519.80</td>
		</tr>
		<tr>
			<th colspan="5">Taxes (10%)</th>
			<td>51.98</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="5">Total</th>
			<td>571.78</td>
		</tr>
	</tbody>
</table>

<details>
	<summary>View code</summary>
<pre><code>&lt;table class=&quot;wb-zebra hassum table table-hover&quot;&gt;
	&lt;caption&gt;Generic Invoice Table&lt;/caption&gt;
	&lt;colgroup&gt;
		&lt;col&gt;
		&lt;col&gt;
		&lt;col&gt;
	&lt;/colgroup&gt;
	&lt;colgroup&gt;
		&lt;col&gt;
		&lt;col&gt;
	&lt;/colgroup&gt;
	&lt;colgroup&gt;
		&lt;col&gt;
	&lt;/colgroup&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th&gt;Product ID&lt;/th&gt;
			&lt;th&gt;Product&lt;/th&gt;
			&lt;th&gt;Description&lt;/th&gt;
			&lt;th&gt;Quantity&lt;/th&gt;
			&lt;th&gt;Unit Price&lt;/th&gt;
			&lt;th&gt;Total&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;td&gt;Key&lt;/td&gt;
			&lt;th&gt;Item&lt;/th&gt;
			&lt;td&gt;Description&lt;/td&gt;
			&lt;td&gt;2 times&lt;/td&gt;
			&lt;td&gt;$25.99&lt;/td&gt;
			&lt;td&gt;51.98&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Key&lt;/td&gt;
			&lt;th&gt;Item&lt;/th&gt;
			&lt;td&gt;Description&lt;/td&gt;
			&lt;td&gt;2 times&lt;/td&gt;
			&lt;td&gt;$25.99&lt;/td&gt;
			&lt;td&gt;51.98&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Key&lt;/td&gt;
			&lt;th&gt;Item&lt;/th&gt;
			&lt;td&gt;Description&lt;/td&gt;
			&lt;td&gt;2 times&lt;/td&gt;
			&lt;td&gt;$25.99&lt;/td&gt;
			&lt;td&gt;51.98&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Key&lt;/td&gt;
			&lt;th&gt;Item&lt;/th&gt;
			&lt;td&gt;Description&lt;/td&gt;
			&lt;td&gt;2 times&lt;/td&gt;
			&lt;td&gt;$25.99&lt;/td&gt;
			&lt;td&gt;51.98&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Key&lt;/td&gt;
			&lt;th&gt;Item&lt;/th&gt;
			&lt;td&gt;Description&lt;/td&gt;
			&lt;td&gt;2 times&lt;/td&gt;
			&lt;td&gt;$25.99&lt;/td&gt;
			&lt;td&gt;51.98&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Key&lt;/td&gt;
			&lt;th&gt;Item&lt;/th&gt;
			&lt;td&gt;Description&lt;/td&gt;
			&lt;td&gt;2 times&lt;/td&gt;
			&lt;td&gt;$25.99&lt;/td&gt;
			&lt;td&gt;51.98&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Key&lt;/td&gt;
			&lt;th&gt;Item&lt;/th&gt;
			&lt;td&gt;Description&lt;/td&gt;
			&lt;td&gt;2 times&lt;/td&gt;
			&lt;td&gt;$25.99&lt;/td&gt;
			&lt;td&gt;51.98&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Key&lt;/td&gt;
			&lt;th&gt;Item&lt;/th&gt;
			&lt;td&gt;Description&lt;/td&gt;
			&lt;td&gt;2 times&lt;/td&gt;
			&lt;td&gt;$25.99&lt;/td&gt;
			&lt;td&gt;51.98&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Key&lt;/td&gt;
			&lt;th&gt;Item&lt;/th&gt;
			&lt;td&gt;Description&lt;/td&gt;
			&lt;td&gt;2 times&lt;/td&gt;
			&lt;td&gt;$25.99&lt;/td&gt;
			&lt;td&gt;51.98&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Key&lt;/td&gt;
			&lt;th&gt;Item&lt;/th&gt;
			&lt;td&gt;Description&lt;/td&gt;
			&lt;td&gt;2 times&lt;/td&gt;
			&lt;td&gt;$25.99&lt;/td&gt;
			&lt;td&gt;51.98&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;th colspan=&quot;5&quot;&gt;Subtotal&lt;/th&gt;
			&lt;td&gt;519.80&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th colspan=&quot;5&quot;&gt;Taxes (10%)&lt;/th&gt;
			&lt;td&gt;51.98&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;th colspan=&quot;5&quot;&gt;Total&lt;/th&gt;
			&lt;td&gt;571.78&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</details>

<h2>Multiple Group</h2>

<p>The following table contain 3 row group and 3 column group. The zebra stripping add column group separator and simulate the column hovering effect.</p>

<p><code>&lt;table class=&quot;wb-zebra wb-zebra-col-hover table table-bordered table-hover&quot;&gt;</code></p>

<div class="row">
	<div class="col-sm-4">
		<table class="wb-zebra wb-zebra-col-hover table table-bordered table-hover">
			<colgroup>
				<col>
				<col>
				<col>
			</colgroup>
			<colgroup>
				<col>
				<col>
				<col>
			</colgroup>
			<colgroup>
				<col>
				<col>
				<col>
			</colgroup>
			<tbody>
				<tr>
					<td>1</td>
					<td></td>
					<td>3</td>
					<td>6</td>
					<td></td>
					<td>4</td>
					<td>7</td>
					<td></td>
					<td>9</td>
				</tr>
				<tr>
					<td></td>
					<td>2</td>
					<td></td>
					<td></td>
					<td>9</td>
					<td></td>
					<td></td>
					<td>1</td>
					<td></td>
				</tr>
				<tr>
					<td>7</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td>6</td>
				</tr>
			</tbody>
			<tbody>
				<tr>
					<td>2</td>
					<td></td>
					<td>4</td>
					<td></td>
					<td>3</td>
					<td></td>
					<td>9</td>
					<td></td>
					<td>8</td>
				</tr>
				<tr>
					<td>&#160;</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>5</td>
					<td></td>
					<td></td>
					<td>9</td>
					<td></td>
					<td>7</td>
					<td></td>
					<td></td>
					<td>1</td>
				</tr>
			</tbody>
			<tbody>
				<tr>
					<td>6</td>
					<td></td>
					<td></td>
					<td></td>
					<td>5</td>
					<td></td>
					<td></td>
					<td></td>
					<td>2</td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td>7</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>9</td>
					<td></td>
					<td></td>
					<td>8</td>
					<td></td>
					<td>2</td>
					<td></td>
					<td></td>
					<td>5</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<details>
	<summary>View code</summary>
<pre><code>&lt;table class=&quot;wb-zebra wb-zebra-col-hover table table-bordered table-hover&quot;&gt;
	&lt;colgroup&gt;
		&lt;col&gt;
		&lt;col&gt;
		&lt;col&gt;
	&lt;/colgroup&gt;
		&lt;colgroup&gt;
		&lt;col&gt;
		&lt;col&gt;
		&lt;col&gt;
	&lt;/colgroup&gt;
		&lt;colgroup&gt;
		&lt;col&gt;
		&lt;col&gt;
		&lt;col&gt;
	&lt;/colgroup&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;td&gt;1&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;3&lt;/td&gt;
			&lt;td&gt;6&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;4&lt;/td&gt;
			&lt;td&gt;7&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;9&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;2&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;9&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;1&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;7&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;6&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;td&gt;2&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;4&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;3&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;9&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;8&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;&amp;#160;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;5&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;9&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;7&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;1&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;td&gt;6&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;5&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;2&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;7&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;9&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;8&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;2&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;5&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</details>
