JSP 控制 td 顯示/隱藏：表格列無法單獨隱藏，正確做法是輸出空字串

JSP 頁面中需根據後台值決定 <td> 顯示內容或隱藏。許多初學者嘗試用 display:none 隱藏單個儲存格，卻發現表格結構崩潰。本文解釋為什麼 td 不能單獨隱藏，並給出正確解決方案。

為什麼 td 不能隱藏？

HTML 表格渲染規則：列由 <tr> 中 <td> 數量決定。若某行隱藏一個 td，該行列數減少，瀏覽器會錯位渲染，導致表格變形、對不齊。

<table border="1">
  <tr><td>A1</td><td>A2</td><td>A3</td></tr>
  <tr><td>B1</td><td style="display:none">B2</td><td>B3</td></tr> <!-- 此行僅2列 -->
</table>

結果：第二行 B3 會跑到第二列位置，視覺錯亂。

正確方案：輸出空字串或佔位符

方案一：JSTL <c:choose>（推薦）

<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
...
<td>
  <c:choose>
    <c:when test="${not empty value}">${value}</c:when>
    <c:otherwise>&nbsp;</c:otherwise> <!-- 保持列數，顯示空白 -->
  </c:choose>
</td>

方案二：EL 三元運算符（簡潔）

<td>${empty value ? '&nbsp;' : value}</td>

方案三：Scriptlet（不推薦，但可行）

<td>
  <%
    String val = (String) request.getAttribute("value");
    out.print(val != null ? val : "&nbsp;");
  %>
</td>

進階：整列隱藏（而非單儲存格）

若需根據條件隱藏整列，必須在 <col> 或 <th> 層面控制：

<table>
  <colgroup>
    <col style="width:100px"/>
    <c:if test="${showEmail}"><col style="width:200px"/></c:if>
  </colgroup>
  <tr>
    <th>Name</th>
    <c:if test="${showEmail}"><th>Email</th></c:if>
  </tr>
  <c:forEach items="${users}" var="u">
    <tr>
      <td>${u.name}</td>
      <c:if test="${showEmail}"><td>${u.email}</td></c:if>
    </tr>
  </c:forEach>
</table>

總結

• 單個 td 不能隱藏，會破壞表格列對齊
• 正確做法：輸出   或空字串保持列數
• 整列隱藏：在 <colgroup>、<th>、每行 <td> 同步用 <c:if> 控制
• 優先使用 JSTL/EL，避免 Scriptlet 混亂視圖邏輯