Tabellen-Tag fügt zusätzliche Td in tr-Tag automatisch hinzu

Question

Hallo Ich bin gerade durch eine mysteriöse Bedingung in meinem Code. single <td> Oder <th> in Chrome und Mozilla Firefox weiß nicht warum.

 <div class="right_content"> 
       <table style="width: 100%; height: 200px; margin-top: 5px;" id="mainTable"> 
        <tr> 
         <th colspan="1">Participant Name</th> 
         <td colspan="1">${fullName}<td> 
         <th colspan="1">Role</th> 
         <td colspan="1">${role}<td> 
         <th colspan="1">Brand/Location</th> 
         <td colspan="1">${location}<td> 
        </tr> 
        <tr> 
         <th>Goal Text</th> 
         <td><input name="goalText" id="goalText" name="goalText" 
          class="text_field" size="40" maxlength="95" tabindex="1" 
          title="Minimum Rating For This Competency" /></td> 
         <th>Assessment Center</th> 
         <td><select name="assessmentCenterId" id="assessmentCenterId" class="text_field" 
          tabindex="2" title="Select Assessment Center"> 
           <option value="-1">--Select Assessment Center--</option> 
           <c:forEach items="${acList}" var="singleAC" varStatus="sts"> 
           <c:choose> 
           <c:when test="${singleAC.id eq 0}"> 
           <option value="${singleAC.id}" selected="selected">${singleAC.name} </option> 
           </c:when> 
           <c:otherwise> 
           <option value="${singleAC.id}">${singleAC.name}</option> 
           </c:otherwise> 
           </c:choose> 
           </c:forEach> 
         </select></td> 

         <th>Status</th> 
         <td><select name="status" id="status" class="text_field" 
          tabindex="3" title="Select Status Of IDP"> 
           <option value="-1" selected="selected">--Select Status--</option> 
           <c:forEach items="${EnumIDPStatus}" var="singleStatus" 
            varStatus="sts"> 
            <c:choose> 
            <c:when test="${(singleStatus.key eq 0) &&(mode eq 'Add')}"> 
            <option value="${singleStatus.key}" selected="selected">${singleStatus.value}</option> 
            </c:when> 
            <c:otherwise> 
            <option value="${singleStatus.key}">${singleStatus.value}</option> 
            </c:otherwise> 
            </c:choose> 
           </c:forEach> 
         </select></td> 
        </tr> 

        <tr> 
         <th>Score</th> 
         <td><input type="text" name="score" id="score" class="text_field" 
          size="40" maxlength="95" tabindex="4" title="Score" /></td> 
         <th>Target Date</th> 
         <td><input type="text" name="targetDate" id="targetDate" 
          class="text_field" title="Minimum Rating For This Competency" /></td> 
         <th>Extended Date</th> 
         <td><input type="text" name="extendedDate" id="extendedDate" 
          class="text_field" /></td> 
        </tr> 

        <tr> 
         <th>Manger Comments</th> 
         <td><textarea name="managerComments" id="managerComments" 
           class="text_field" rows="5" cols="50" tabindex="7" 
           title="Minimum Rating For This Competency"></textarea></td> 
         <th>Assessor Comments</th> 
         <td><textarea name="assessorComments" id="assessorComments" 
           class="text_field" rows="5" cols="50" tabindex="8" 
           title="Minimum Rating For This Competency"></textarea></td> 
         <th>Participant Comments</th> 
         <td><textarea name="participantComments" 
           id="participantComments" class="text_field" rows="5" cols="50" 
           tabindex="9" title="Minimum Rating For This Competency"></textarea> 
         </td> 
        </tr> 

        <tr> 
         <td colspan="6" class="frm_footer_buttons" 
          style="text-align: center;"><input type="button" 
          name="btnsubmit" id="btnsubmit" class="frm_button" 
          value="<spring:message code='button.save' />" tabindex="10" 
          onclick="return errorPopup();" /> <input type="reset" 
          class="frm_button" value="Reset" tabindex="11" /> <input 
          type="button" class="frm_button" 
          value="<spring:message code='button.cancel'/>" tabindex="12" 
          onclick="submitRequest('showIDPList.html');" /></td> 
        </tr> 
       </table> 
     </div> 

Answer 1

Stellen Sie sicher, immer richtig Ihre HTML-Tags schließen.

Hier ist ein Teil Ihrer HTML:

<tr> 
    <th colspan="1">Participant Name</th> 
    <td colspan="1">${fullName}<td> 
    <th colspan="1">Role</th> 
    <td colspan="1">${role}<td> 
    <th colspan="1">Brand/Location</th> 
    <td colspan="1">${location}<td> 
</tr> 

Können Sie ein Problem erkennen?

Schauen Sie sich Ihre abschließenden Tags genau an. Ihre <th> öffnenden Tags haben korrekte </th> schließende Tags, aber Sie <td> nicht. Sie vermissen / in ihren schließenden Tags, was bedeutet, dass Sie ein neues Tag öffnen, anstatt das vorherige zu schließen.