Tema: Barra de scroll dinámica [SOLUCIONADO]
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 10/08/2012, 06:29
Wolfchamane
 
Fecha de Ingreso: junio-2008
Ubicación: Madrid
Mensajes: 73
Antigüedad: 16 años, 7 meses
Puntos: 1
De acuerdo Respuesta: Barra de scroll dinámica [SOLUCIONADO]
SOLUCIÓN FINAL

Aquí los códigos de la plantilla que da solución a este "dilema".

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>test wTable</title>
  5.     <link rel="stylesheet" type="text/css" href="style.css" />
  6.   </head>
  7.   <body>
  8.     <div id="container">
  9.       <table id="tablaDatos">
  10.         <tbody>
  11.           <tr>
  12.             <td class="data">celda 1</td>
  13.             <td class="data">celda 2</td>
  14.             <td class="data">celda 3</td>
  15.             <td class="actions">                                      
  16.               <div id="wrapper">
  17.                 <a id="link_00" class="link_w_img"></a>
  18.                 <a id="link_01" class="link_w_img"></a>
  19.                 <a id="link_02" class="link_w_img"></a>
  20.                 <div id="clear"></div>
  21.               </div>                
  22.             </td>
  23.           </tr>
  24.         </tbody>
  25.       </table>
  26.     </div>
  27.   </body>
  28. </html>

Código CSS: 
Ver original
  1. #tablaDatos
  2. {
  3.   width: 100%;
  4. }
  5.  
  6. #tablaDatos tr td
  7. {
  8.   border: 1px solid #000000;
  9.   min-width: 40px;
  10.   min-height: 40px;
  11.   max-width: 25%;
  12.   max-height: 40px; 
  13. }
  14.  
  15. #container
  16. {
  17.   width: 100%;
  18.   height: 50%;
  19. }
  20.  
  21. #wrapper
  22. {
  23.    /* el div wrapper ha de tener un tamaño fijo */
  24.    width: 100%;
  25.    min-width: 126px;
  26.    max-width: 126px;                                  
  27.    height: 100%;
  28.    
  29.    border: 1px solid #FFFFFF;
  30.    border-collapse: collapse;
  31.    
  32.    position: relative;
  33.    left: 0px;
  34.    top: 0px;   
  35. }
  36.  
  37. #clear
  38. {
  39.   clear: left;
  40. }
  41.  
  42. .link_w_img
  43. {
  44.    background: url('../01.JPG') no-repeat;
  45.    margin-left: 2px;
  46.    width: 40px;
  47.    height: 40px;
  48.    float: left;
  49.    cursor: pointer;
  50. }
  51.  
  52. .actions
  53. {
  54.   text-align: left;
  55.   
  56.   overflow: auto; 
  57.   overflow-y: hidden;
  58.   
  59.   display: block; 
  60. }
  61.  
  62. .data
  63. {
  64.   text-align: center;
  65. }

Saludos!