title: Trying to merge 2 tables together to look like 1
body: <p>I have a table that I broke out to two tables because I need to have the scrolling functionality only span the top table.  The bottom table is a textarea box.  What I need to do is make the bottom table blend right into the top table to looks as if its all 1 table while maintaining 2 tables. Maybe by modifying the borders? </p>
  
  <pre><code>&lt;form id="commentForm" name="commentForm" action="" method="post"&gt;
  &lt;ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}"&gt;
  &lt;ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?entryId=${entry.entryId}"/&gt;
  &lt;table class="data_table vert_scroll_table" style="width:360px;"&gt;
      &lt;tr&gt;
      &lt;th style="text-align: center;"&gt;User&lt;/th&gt;
      &lt;th style="text-align: center;"&gt;Date&lt;/th&gt;
      &lt;th style="text-align: center;"&gt;Comments&lt;/th&gt; 
      &lt;/tr&gt;
      &lt;c:forEach var="comments" items="${entry.comments}"&gt;
      &lt;tr id="id${comments.id}"&gt;
          &lt;c:choose&gt;
              &lt;c:when test="${comments.auditable != null}"&gt;
          &lt;td&gt;
              ${comments.auditable.createdBy.lastName},   ${comments.auditable.createdBy.firstName}
        &lt;/td&gt;
  
  
            &lt;td title="&lt;fmt:formatDate value="${comments.auditable.createdDate}" pattern="${date_time_pattern}" /&gt;"&gt;&lt;span class="mouseover_text"&gt;&lt;fmt:formatDate value="${comments.auditable.createdDate}" pattern="${date_time_pattern}" /&gt;&lt;/span&gt;
            &lt;/td&gt;
  
            &lt;/c:when&gt;
          &lt;c:otherwise&gt;
           &lt;td  colspan="1"&gt;${lastName}, ${firstName}&lt;/td&gt;
           &lt;td title ="${comments.date}"&gt;&lt;span class="mouseover_text"&gt;${comments.date}  &lt;/span&gt;&lt;/td&gt;
      &lt;/c:otherwise&gt;
      &lt;/c:choose&gt;
      &lt;td id="comments-${comments.id}"  style="width:400px;"&gt;&lt;pre style="width: auto;"&gt;${comments.comment}&lt;/pre&gt;&lt;/td&gt;
  
      &lt;/c:forEach&gt;
      &lt;/tr&gt; 
  
      &lt;tr id="commentRow"&gt;    
      &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/ctl:vertScroll&gt;
  
  
  
      &lt;c:if test="${lock.locked || form.entryId &lt; 0 }"&gt;
  
      &lt;%-- This is the row for adding a new comment. --%&gt;           
  
      &lt;table class="data_table vert_scroll_table" style="width:360px;"&gt;
          &lt;td colspan="3"&gt;
          You have &lt;strong&gt;&lt;span id="commentsCounter"&gt;${const['COMMENT_MAX_LENGTH'] - fn:length(commentForm.comment)}&lt;/span&gt;&lt;/strong&gt; characters left.&lt;br/&gt;
              &lt;textarea id="comment"   name="comment" rows="2" cols="125" style="width:400px;"
  
                  onfocus="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"
                   onkeydown="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"
                   onkeyup="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)" &gt;&lt;/textarea&gt;
  
                      &lt;a href="javascript:addComment();"&gt;&lt;img src="../images/icon_add.gif" border="0" alt="Add"/&gt;&lt;/a&gt;
          &lt;/td&gt;
  
  
  
      &lt;/c:if&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p></p>