Con el cursor dentro del div Inclinando la rueda del ratón a derecha o izquierda se produce el desplazamiento lateral.
Para que ocurra lo mismo al girar la rueda (invertir el sentido del desplazamiento) necesitas algún js, sólo con html+css no podrás.
Investiga esta página:
http://deanoakley.com/También puedes hacer una búsqueda en google por ' pagina web horizontal'
Como complemento, aunque no lo planteas, creo que podrías prescindir de la tabla que utilizas y hacer el código un poco más semántico y límpio.
Mira este ejemplo, quizás te sirva de guía:
Código HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>DvillB: galería</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* { margin: 0px; padding: 0px; outline: 0;}
body {
background-color: #ebeef2;
}
h3 {
color:#838c98;
}
a {text-decoration: none;}
.galeria {width: 1450px;}
#principal {
width:470px;
height:180px;
margin:-90px 0 0 -235px;
overflow-x:auto;
overflow-y:hidden;
position:absolute;
top:50%;
left:50%;
}
#principal ul {}
#principal li {
list-style-type: none;
float:left;
margin: 5px;
padding: 5px;
background: #cdcdcd;
}
#principal ul li img {
border:1px solid #EEE;
float:left;
margin-right:5px;
}
</style>
</head>
<body>
<div id="principal">
<div class="galeria">
<ul>
<li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/4.jpg" alt=""/></a></li>
</ul>
</div>
</div>
</body>
</html>
Como verás, sólo son dos cajas (div's) y una lista (ul).
Saludos
