试图合并2个表格在一起看起来像1

Question

我有一张表，我分手到两个表，因为我需要滚动功能只能跨越顶部表。底部表格是一个textarea盒子。我需要做的是将底部表格混合到顶部表格中，看起来好像它的全部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

因为你的代码中有一些<c:forEach var="comments" items="${entry.comments}">怪异的东西，我不会惹它。但我会简单地给出答案。 免责声明：这是如何，我会这样做，但可能有更好的做事方式。另外，我使用虚线边框进行演示。

（1）得到控制宽度的

让我们做与集宽度的全球包装。

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

（2）让我们做出了榜样表

我们现在正在一个示例表与一些随机列表。也让width: 100%;到表中，所以它将匹配全局包装的宽度。

<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）现在，第二表

允许添加的形式表或又名。第二张表..

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

或为什么要用<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> 

不知道这有多大的帮助。但这是这种类型的问题的一般想法:)

Answer 2

尝试重新考虑你的标记。这将更加适合：

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