title: Need a scrolling cell in an html table
body: <p>I have an html table that contains a cell will a lot of data (maybe 200 lines).
  Rather than requiring my page to scroll, I want my cell in the table to scroll.<br>
  I understand that I need a <code>div</code> block to do this.  I defined a div block in my
  css file but it is not taking.   </p>
  
  <p>How do I fix the height of my cell and give my data a scrollbar?</p>
  
  <p>--------html table-----------</p>
  
  <pre><code>&lt;table class="cmain"&gt;
    &lt;tr&gt;
      &lt;td&gt;  TOP LEFT CELL &lt;p&gt;
          &lt;table&gt; &lt;tr&gt; &lt;td&gt; A sub-table goes here &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;
      &lt;/td&gt;
      &lt;td&gt;  TOP RIGHT CELL &lt;p&gt;
         &lt;p&gt; A PHOTO GOES HERE.
         &lt;p&gt; PHOTO: {{ form.image }}
     &lt;/td&gt;
     &lt;td rowspan="2" valign="top" &gt; 
         THIS IS THE CELL THAT NEEDS THE SCROLL BAR.  &lt;div id="scrollcell"&gt;
             SCROLLER CELL &lt;hr&gt;
              &lt;p&gt; {% for customer in customer_list  %}
              &lt;p&gt; {{ customer }} &lt;/p&gt;
             {% endfor %}
         &lt;/div&gt;
     &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
  &lt;td&gt; Another Sub-table goes here.
          &lt;table&gt; &lt;tr&gt; &lt;td&gt; A sub-table goes here &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;
  &lt;/td&gt; 
     &lt;td&gt; A NOTES FORM FIELD GOES HERE &lt;p&gt;
       {{ form.notes }} &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt; &lt;!-- end of CMAIN table --&gt;
  </code></pre>
  
  <p>--------css -----------</p>
  
  <pre><code>table, th, td {
          border: 1px solid white;
  }
  
  table.cmain {
          border: 1px solid blue;
  }
  
  table.cmain td { 
          border: 1px solid blue;
      font-weight: bold;
          /*width: 300;*/
          padding: 3px; 
      font-size: 0.8em;
  }
  
  #scrollcell {
          width: 50px;
          height: 50px;
          overflow: auto;
  }
  </code></pre>