переполнение прокрутки работает неожиданная внутри таблицы

Question

см http://liveweave.com/nZjCNe

я установил ширину таблицы по ширине окна, он отлично работает, когда изображение внутри ул> Li меньше, но когда изображения большие целое окно показывает свиток, почему?
поэтому я использовал style="height:100%;overflow:hidden для ul.

HTML код

<table border="1" width="100%" height="100%" style="max-width:800px" align="center"> 
<tr height="40px"><td>tab 1</td><td>tab 2</td></tr> 
<tr height="calc(100% - 40px)"> 
    <td colspan="2"> 
     <table border="1" width="100%" height="100%"> 
      <tr> 
       <td width="20%"> 
        <ul id="image-list" class="scrollimage" style="height:100%;overflow:hidden"> 
         <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="101" ></li> 
         <li style=""><img src="img/12.png" class="draggable-image" alt="top" id="30" ></li> 
         <li style=""><img src="img/13.png" class="draggable-image" alt="top" id="10" ></li> 
         <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="30" ></li> 
         <li style=""><img src="img/12.png" class="draggable-image" alt="top" id="30" ></li> 
         <li style=""><img src="img/13.png" class="draggable-image" alt="top" id="10" ></li> 
         <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="30" ></li> 
        </ul> 
       </td> 
       <td width="60%"> 
        <table border="1" width="100%" height="100%"> 
         <tr> 
          <td> 
           <table border="1" width="100%" height="100%"> 
            <tr height="calc(100% - 40px)"><td></td></tr> 
            <tr height="40px"><td></td></tr> 
           </table> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <table border="1" width="100%" height="100%"> 
            <tr height="calc(100% - 40px)"><td></td></tr> 
            <tr height="40px"><td></td></tr> 
           </table>        
          </td> 
         </tr> 
        </table> 
       </td> 
       <td width="20%"> 
        <ul id="image-list" class="scrollimage" style="height:100%;overflow:hidden"> 
         <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="101" ></li> 
         <li style=""><img src="img/12.png" class="draggable-image" alt="top" id="30" ></li> 
         <li style=""><img src="img/13.png" class="draggable-image" alt="top" id="10" ></li> 
         <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="30" ></li> 
         <li style=""><img src="img/12.png" class="draggable-image" alt="top" id="30" ></li> 
         <li style=""><img src="img/13.png" class="draggable-image" alt="top" id="10" ></li> 
         <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="30" ></li> 
        </ul> 
       </td> 
      </tr> 
     </table> 
    </td> 
</tr> 
</table> 

CSS код

#image-list { 
    margin: 0; 
    padding: 0; 
    float: right; 
    } 
    #image-list li { 
    list-style: none; 
    overflow: hidden; 
    margin-bottom: 8px; 
    cursor: pointer; 
    } 
    .draggable-image{ 
    width:100% 
    } 

пожалуйста кто-нибудь помочь мне решить эту проблему.

Answer 1

добавить overflow:scroll в мкл и дать ему фиксированную высоту, как height:200px, то ваш уль будет прокручиваться при переполнении

#image-list { 
    margin: 0; 
    padding: 0; 
    float: right; 
    height: 200px; 
    overflow: scroll; 
}