試圖合併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>