Trying to merge 2 tables together to look like 1 - html

Question

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?
<form id="commentForm" name="commentForm" action="" method="post">
<ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
<ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?entryId=${entry.entryId}"/>
<table class="data_table vert_scroll_table" style="width:360px;">
<tr>
<th style="text-align: center;">User</th>
<th style="text-align: center;">Date</th>
<th style="text-align: center;">Comments</th>
</tr>
<c:forEach var="comments" items="${entry.comments}">
<tr id="id${comments.id}">
<c:choose>
<c:when test="${comments.auditable != null}">
<td>
${comments.auditable.createdBy.lastName}, ${comments.auditable.createdBy.firstName}
</td>
<td title="<fmt:formatDate value="${comments.auditable.createdDate}" pattern="${date_time_pattern}" />"><span class="mouseover_text"><fmt:formatDate value="${comments.auditable.createdDate}" pattern="${date_time_pattern}" /></span>
</td>
</c:when>
<c:otherwise>
<td colspan="1">${lastName}, ${firstName}</td>
<td title ="${comments.date}"><span class="mouseover_text">${comments.date} </span></td>
</c:otherwise>
</c:choose>
<td id="comments-${comments.id}" style="width:400px;"><pre style="width: auto;">${comments.comment}</pre></td>
</c:forEach>
</tr>
<tr id="commentRow">
</tr>
</table>
</ctl:vertScroll>
<c:if test="${lock.locked || form.entryId < 0 }">
<%-- This is the row for adding a new comment. --%>
<table class="data_table vert_scroll_table" style="width:360px;">
<td colspan="3">
You have <strong><span id="commentsCounter">${const['COMMENT_MAX_LENGTH'] - fn:length(commentForm.comment)}</span></strong> characters left.<br/>
<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)" ></textarea>
<img src="../images/icon_add.gif" border="0" alt="Add"/>
</td>
</c:if>
</table>

Answer 1

Try rethinking your markup. This would be much more suited:
<table>
<thead>
<tr>
<th>User</th>
<th>Date</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
...
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>
<textarea>...</textarea>
</td>
</tr>
</tfoot>
</table>

Answer 2

Since your code has some weird stuff in it <c:forEach var="comments" items="${entry.comments}">, I'm not gonna mess with it. But I will give the the answer in a nutshell. Disclaimer: This is how, I would do this, but probably there are better ways of doing things. Also, I'm using dotted borders for the demo.
(1) Get the width's under control
Lets make a global wrapper with set width.
<div style="width: 600px; margin: 0px auto; border: 1px dotted blue;">
miley rocks!
</div>
(2) Lets make an example table
We are now making an example table with some random list. Also lets width: 100%; to the table, so it will match the global wrapper's width.
<table style="width: 100%; border: 1px dotted green;">
<tr>
<th>Name</th>
<th>Hotness level</th>
</tr>
<tr>
<td>Miley</td>
<td>10</td>
</tr>
<tr>
<td>Selena</td>
<td>9</td>
</tr>
<tr>
<td>You</td>
<td>-3</td>
</tr>
</table>
(3) Now the second table
Lets add the form table or aka. the second table..
<table style="width: 100%; border: 1px dotted blue;">
<tr>
<td>
<textarea name="my_textarea"></textarea>
</td>
</tr>
</table>
Or why use <table>?
<div style="width: 100%; border: 1px dotted blue;">
<textarea name="my_textarea"></textarea>
</div>
(4) And now everything together
All tables and containers together. This should result two containers with the same width.
<div style="width: 600px; margin: 0px auto; border: 1px dotted blue;">
<table style="width: 100%; border: 1px dotted green;">
<tr>
<th>Name</th>
<th>Hotness leve</th>
</tr>
<tr>
<td>Miley</td>
<td>10</td>
</tr>
<tr>
<td>Selena</td>
<td>9</td>
</tr>
<tr>
<td>You</td>
<td>-3</td>
</tr>
</table>
<div style="width: 100%; border: 1px dotted blue;">
<textarea name="my_textarea"></textarea>
</div>
</div>
Not sure how much this helps. But this is the general idea for that type of problem :)