2つのテーブルを1つのようにマージしようとしています

Question

スクロール機能をトップテーブルにのみ配置する必要があるため、私は2つのテーブルに分割しました。下の表はテキストエリアボックスです。私がする必要があるのは、2つのテーブルを維持しながら、すべての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> 

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）そして今、一緒に一緒にすべて

すべてのテーブルとコンテナを。これにより、同じ幅の2つのコンテナが作成されます。

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