Html 试图将两个表合并在一起，使其看起来像1

我有一个表，我打破了两个表，因为我需要有滚动功能只跨越顶部的表。底部的表格是一个文本区域框。我需要做的是让底部的桌子和顶部的桌子融为一体，看起来就像是所有的一张桌子，同时保持两张桌子。也许通过修改边界

<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>

                    <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
        </td>



    </c:if>
    </table>

使用者
日期
评论
${comments.auditable.createdBy.lastName}，${comments.auditable.createdBy.firstName}
${lastName}，${firstName}
${comments.date}
${comments.comment}
您还有${const['COMMENT\u MAX\u LENGTH']-fn:LENGTH（commentForm.COMMENT）}个字符。

---

既然你的代码中有一些奇怪的东西，我就不想弄乱它了。但我会简单地给出答案免责声明：我会这样做，但可能有更好的方法。另外，我在演示中使用了虚线边框

（1）控制宽度

让我们创建一个具有设置宽度的全局包装器

<div style="width: 600px; margin: 0px auto; border: 1px dotted blue;">
    miley rocks!
</div>

（3）现在是第二个表

让我们添加表单表或aka。第二张桌子

<table style="width: 100%; border: 1px dotted blue;">
    <tr>
        <td>
            <textarea name="my_textarea"></textarea>
        </td>
    </tr>
</table>

或者为什么要使用

<div style="width: 100%; border: 1px dotted blue;">
    <textarea name="my_textarea"></textarea>
</div>

（4）现在一切都在一起了

所有的桌子和容器放在一起。这将导致两个宽度相同的容器

<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>

名称
热度
麦莉
10
赛琳娜
9
你
-3

---

不知道这有多大帮助。但这是解决这类问题的一般思路：）

试着重新思考您的标记。这将更适合：

<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>

使用者
日期
评论
...
...

您还可以使用tfoot和colspan来为所有内容使用一个表。

<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>