Menu: table layout alternate colours

Designing a menu to match designers UI/UX series.

by Stephane de Luca

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- (1) menu c2a -->
<div><a onclick="$('#myMenu').toggleClass('zid-open')">Réassort</a></div>
<!-- (2) the menu itself -->
<table id="myMenu" class="zid-open-close menu">
  <tbody>
    <tr><td><img src></td><td>L’express<br>n°220</td><td><a href="">Nouvelle commande</a></td></tr>
    <tr><td><img src></td><td>L’express<br>n°221</td><td><a href="">Nouvelle commande</a></td></tr>
    <tr><td><img src></td><td>L’express<br>n°222</td><td><a href="">Nouvelle commande</a></td></tr>
    <tr><td><img src></td><td>L’express<br>n°223</td><td><a href="">Nouvelle commande</a></td></tr>
	</tbody>
</table>

CSS

html {
  font-family: --apple-system, sans-serif;
}
.zid-open-close {
	display: none;
}
.zid-open {
	display: block!important;
}
.menu {
	width: 450px;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: white;
  border: solid 1px lightgray;
  box-shadow: rgba(0,0,0, 0.3) 0 10px 10px;
}
.menu>tbody>tr:nth-child(odd) {
	background-color: hsl(0,0%,96%);
}