如何正確顯示錶格？

Question

我有一些數據，我想要顯示它。 telnumbers和'teltype`必須位於其所有者的一列中。

我有這樣的：

，這我的代碼：

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
 
<div xmlns:jsp="http://java.sun.com/JSP/Page" 
 
    xmlns:c="http://java.sun.com/jsp/jstl/core" 
 
    xmlns:spring="http://www.springframework.org/tags" 
 
    version="2.0"> 
 
    <jsp:directive.page contentType="text/html;charset=UTF-8"/> 
 
    <jsp:output omit-xml-declaration="yes"/> 
 

 
    <style> 
 
     table, th, td { 
 
      border: 1px solid black; 
 
     } 
 
    </style> 
 

 
    <h1>Contact list</h1> 
 

 
    <c:if test="${not empty contacts}"> 
 
     <table> 
 
      <thead> 
 
      <tr> 
 
       <th>First Name</th> 
 
       <th>Last Name</th> 
 
       <th>Birth Date</th> 
 
       <th>tel_type</th> 
 
       <th>tel_number</th> 
 
       <th>hobby</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <c:forEach items="${contacts}" var="contact"> 
 
       <jsp:useBean id="contact" scope="page" type="org.training.support.model.Contact"/> 
 
       <tr> 
 
       <td>"${contact.firstName}"</td> 
 
       <td>"${contact.lastName}"</td> 
 
       <td>"${contact.birthDate}"</td> 
 
        <c:forEach items="${contact.contactDetails}" var="telDetail"> 
 
         <jsp:useBean id="telDetail" scope="page" type="org.training.support.model.ContactTelDetail"/> 
 
          <td>"${telDetail.telNumber}"</td> 
 
          <td>"${telDetail.telType}"</td> 
 
        </c:forEach> 
 
        <c:forEach items="${contact.hobbies}" var="hobby"> 
 
         <jsp:useBean id="hobby" scope="page" type="org.training.support.model.Hobby"/> 
 
          <td>"${hobby.id}"</td> 
 
        </c:forEach> 
 
       </tr> 
 
      </c:forEach> 
 
      </tbody> 
 
     </table> 
 
    </c:if> 
 
</div>

Answer 1

在這裏，我已經添加了相關的代碼你的解決方案請在JSP中添加以下標籤。

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 

這裏是改變

<h1>Contact list</h1> 

<c:if test="${not empty contacts}"> 
    <table> 
     <thead> 
     <tr> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Birth Date</th> 
      <th colspan="${fn:length(contact.contactDetails)}">tel_type & tel_number</th> 
      <th colspan="${fn:length(contact.hobbies)}">hobby</th> 
     </tr> 
     </thead> 
     <tbody> 
     <c:forEach items="${contacts}" var="contact"> 
      <jsp:useBean id="contact" scope="page" type="org.training.support.model.Contact"/> 
      <tr> 
      <td>"${contact.firstName}"</td> 
      <td>"${contact.lastName}"</td> 
      <td>"${contact.birthDate}"</td> 
       <c:forEach items="${contact.contactDetails}" var="telDetail"> 
        <jsp:useBean id="telDetail" scope="page" type="org.training.support.model.ContactTelDetail"/> 
         <td>"${telDetail.telType}" - "${telDetail.telNumber}"</td>       
       </c:forEach> 
       <c:forEach items="${contact.hobbies}" var="hobby"> 
        <jsp:useBean id="hobby" scope="page" type="org.training.support.model.Hobby"/> 
         <td>"${hobby.id}"</td> 
       </c:forEach> 
      </tr> 
     </c:forEach> 
     </tbody> 
    </table> 
</c:if> 

而結果將是繼圖像

Answer 2

對於一個表來正確顯示的 '日' 的數量必須匹配「tr」內的'td'數量如下：

<table> 
    <thead> 
    <tr> 
     <th>"Header 1"</th> 
     <th>"Header 2"</th> 
     <th>"Header 3"</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> "Value1"</td> 
     <td> "Value2"</td> 
     <td> "Value3"</td> 
    </tr> 
    </tbody> 

在你的情況，而無需查看在你的表是很難說，但因爲使用的是：

<c:forEach items="${contact.contactDetails}" var="telDetail">

是給你超過6個TD在你的頭＃可能是由於您的表中的值，檢查您是否有空值或空值。嘗試消除空值，並在這些字段上留下單個空間，然後再次嘗試或用一個for循環替換多個foreach，並按索引來尋址每個數組。

例如：

<c:if test="${not empty contacts}"> 
    <table> 
     <thead> 
     <tr> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Birth Date</th> 
      <th>tel_type</th> 
      <th>tel_number</th> 
      <th>hobby</th> 
     </tr> 
     </thead> 
     <tbody> 
     <c:forEach begin="0" end="${fn:length(contacts)}" var="i"> 
      <jsp:useBean id="contact" scope="page" type="org.training.support.model.Contact"/> 
      <tr> 
       <td>"${contacts[i].firstName}"</td> 
       <td>"${contacts[i].lastName}"</td> 
       <td>"${contacts[i].birthDate}"</td> 
       <td>"${contact.contactDetails[i].telNumber}"</td> 
       <td>"${contact.contactDetails[i].telType}"</td> 
       <td>"${contact.hobbies[i].id}"</td> 
      </tr> 
     </c:forEach> 
     </tbody> 
    </table> 
</c:if> 

確保您加入這個標籤庫在頁面的頂部，使FN的大小

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>