html - 试图将 2 个表合并在一起看起来像 1

Question

我有一个表格，我将其拆分为两个表格，因为我需要滚动功能仅跨越顶层表格。底部表格是一个文本框。我需要做的是让底部表格直接融入顶部表格，看起来就像它的所有 1 个表格，同时保持 2 个表格。也许通过修改边界？

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

Answer 1

尝试重新考虑您的标记。这会更适合:

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