I'm currently working on creating a layout with draggable rows.
When trying to style the table (located on the right and bordered in green), everything looks great. However, once I add anchor tags to transform these into large draggable cells that will be moved around, the striping disappears and they end up with a gray background (reflecting the left table with a yellow border).
Here is my HTML/CSS code:
<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>
I'm looking for a way to create big draggable cells where the 'hand' cursor appears over the entire cell rather than just the text inside. It's crucial to maintain the table striping even if there are more than 20 rows involved, as this dynamic component is vital to the design.