如何正确显示表格？

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