css inherit和Ajax的问题

Question

有一个表替代文本，它使用CSS（通过在CSS中使用继承）来格式化其布局。如您所见，窗口顶部有一个下拉列表，允许我们选择名称，并根据选择，填充表格。此操作已由Ajax调用处理，因此我们只刷新表而不是页面的其余部分。但是，当我们调用此Ajax调用时，即使代码中没有任何更改，此表的垂直和水平边框之间也会有额外的空间。我假设Ajax调用和CSS布局存在问题，我们有这些额外的空间。是否有意义？或者你有什么地方可以开始我的调查吗？

以下是我的Test.jsp

的源代码

<a:test-webpart>

<table class="ContentPanel first-child" cellspacing="0" cellpadding="0">
    <tr>
        <th id="title" class="CPHeader" width="100%" colspan="400" style="border-bottom:1px solid <theme:get selector="#test .DefaultBorder" attribute="border-color" />;"><c:out value="${tile_title}" /></th>
    </tr>
    <%@ include file="MyTest.jst" %>
    <tbody  class="content-area">
    <tr>
        <td>
            <table class="ContentPanel ControlLayout" >
        <tr>
                    <th style="padding-left:7px;" width="20%"><label for="testlist"><span >*</span><fmt:message key = "jsp.request.testlist" bundle="${local}" /></label></th>
                    <td class="last-child" width="80%">
                        <span >
                            <html:select property="valueAsMap(test_ITEM).value(test_OFFER)" styleClass="dropDown" styleId="offeredtest">
                                <html:optionsCollection property="value(Item_test_LIST)" label = "name" value ="id" />
                            </html:select>
                        </span>
                    </td>
                </tr>
                <tr>
              <th style="padding-left:7px;" width="20%"><label for="employeeslist"><span >*</span><fmt:message key = "jsp.reques.employeeslist" bundle="${local}" /></label></th>
                    <td class="last-child" width="80%" >
                        <span >
                            <html:select property="valueAsMap(test_ITEM).value(Item_test_EMP)" onchange="javascript:getAlltests()"  styleClass="dropDown" styleId="employeeId">
                                <html:optionsCollection property="value(Item_test_EMP_LIST)" label = "name" value = "id" />
                            </html:select>
                        </span>
                    </td>
                </tr>
      </table>
    </td>
  </tr>
  <tr>
        <th style="padding-left:7px;" align="left"><label for="testacceptlist"><span >*</span><fmt:message key = "jsp.request.testacceptlist" bundle="${local}" /></label></th>
    </tr>
  <tr>
    <td style="padding-left:7px;">
    <kvl:rsr-webpart>
     <div id="testsTable">
      <table class="Tabular" width="100%"  cellpadding="0" cellSpacing="0">
        <tr class="first-child">
          <th><fmt:message key = "jsp.request.select" bundle="${local}" /></th>
            <th ><fmt:message key = "jsp.request.a" bundle="${local}" /></th>
            <th ><fmt:message key = "jsp.request.b" bundle="${local}" /></th>
            <th ><fmt:message key = "jsp.request.c" bundle="${local}" /></th>
            <th ><fmt:message key = "jsp.request.d" bundle="${local}" /></th>
            <th ><fmt:message key = "jsp.request.e" bundle="${local}" /></th>
            <th ><fmt:message key = "jsp.request.f" bundle="${local}" /></th>
            <th class="last-child"><fmt:message key = "jsp.request.job" bundle="${local}" /></th>
        </tr>

        <c:forEach var="item" items = "${items}"  varStatus="status">       
          <tr class="<c:if test='${status.index % 2 !=  0}'>Even</c:if> <c:if test='${item.isFromPrimaryJob == true}'>Primary</c:if> <c:if test='${item.isFromPrimaryJob != true}'>Exchange</c:if>">
                <td>
                    <input  type="checkbox"
                        id="test_id_<c:out value="${item.id}"/>_<c:out value="${item.Date}"/>"
                        name="value(test_selected)" 
                        value="<c:out value="${item.id}" />_<c:out value="${item.Date}"/>" 
                        onclick="javascript:checkBox('test_id_<c:out value="${item.id}"/>_<c:out value="${item.Date}"/>','value(test_selected)','valueAsMap(REQUEST_ITEM).value(test_selected_list)','false')" >
                </td>
                <td>
                    <c:choose>
                            <c:when test="${empty item.label}">
                        &nbsp;
                    </c:when>
                    <c:otherwise>
                        <c:out value="${item.label}"/>
                    </c:otherwise>
                    </c:choose>
                </td>
                <td><c:out value="${item.Date}"/></td>
                <td><c:out value="${item.b}"/></td>
                <td><c:out value="${item.d}"/></td>
                <td><c:out value="${item.e}"/></td>
                <td><c:out value="${item.f}"/></td>
                <td class="last-child"><c:out value="${item.job}"/></td>
            </tr>
        </c:forEach>
        </table>
        </div>
      </kvl:rsr-webpart>
    </td>
  </tr>
  <tr>
        <td style="padding-left:7px;">
            <table class="ContentPanel ControlLayout" width="100%">
          <%@ include file="request.jst" %>
       </table>
     </td> 
   </tr>      
  </tbody>
</table>
</a:test-webpart>

Answer 1

查看生成的HTML。只是看看渲染的东西会有所帮助，除非出现问题，而不是什么。只是查看服务器代码无济于事，因为它有时使用魔法并隐藏HTML。

Answer 2

后来我发现问题与任何Ajax渲染无关。返回的HTML标记具有这些额外的填充，因为它从另一个地方继承了它的布局。我强制执行我的填充和边界以及我从服务器发送的单元格，一切都像魅力一样。