I'm trying to make a layout with rows that will be dragged.

![enter image description here](https://i.stack.imgur.com/Tsgf9.png)

I can strip the table nicely (table on right with green border) but when I add anchor tags so that these become big draggable cells (they're going to be dragged), the striping goes away and they have a gray background (table on left with yellow border).

HTML/CSS:

```
<html>
  <head>
  <style>
    #categorizer { padding: 20px; }
    #left  {
      color: green;
      background-color: yellow;
      display: inline;
      border: solid;
      border-color: pink, 10px
      padding: 20px;
      margin: 20px;
    }   
    #right {
      color: yellow;
      background-color: green;
      display: inline;
      border: solid;
      border-color: pink, 10px
      padding: 20px;
      margin: 20px;
    }   
    ul  
    {   
      padding: 30px;
      margin: 30px;
      float:left;
      list-style:none;
    }   
    li {
    padding: 20px;
    }   
    li:nth-child(even) { background-color: #000 }
    li:nth-child(odd) { background-color: #666 }
  </style>
  </head>
  <body>
    <div id="categorizer">
      <ul id="left">
        <a href="#"><li>1</li></a>
        <a href="#"><li>2</li></a>
        <a href="#"><li>3</li></a>
        <a href="#"><li>4</li></a>
      </ul>
      <ul id="right">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
      </ul>
    </div>
  </body>
</html>

```

How can I have big draggable cells that 'show the hand' - not just over the letters, but the whole cell - that's important - but still apply the table striping (could also be 20+ rows for this, that's dynamic).