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

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

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

Answer 2

由于你的代码中有一些奇怪的东西<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）现在是第二个表

让我们添加表单或aka。第二个表..

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

不确定这有多大帮助。但这是针对这类问题的一般想法：）

尝试将两个表合并为1

2 个答案: