Question

我正在使用百里香叶来遍历列表并将其显示在表格中，如下所示。

<span class="title" th:text="${schema}"> Event List </span>
<table class="table is-fullwidth">
    <thead>
    <tr>
        <th>Timestamp</th>
        <th>Payload</th>
        <th>MetaData</th>
    </tr>
    </thead>them
    <tbody>
    <th:block th:each="event :${data}">
        <tr>
            <td th:text="${event.timestamp}"></td>
            <td>
                <pre lang="xml" th:text="${event.payload}"></pre>
            </td>
            <td>
                <pre lang="xml" th:text="${event.metaData}"></pre>
            </td>
            </br>
        </tr>
    </th:block>

    </tbody>
</table>

但是我发现在Chrome和IE中，
标签都被插入了表格上方。对于表格中的每一行，在呈现的html中表格上方都有一个
标记。奇怪的是，当我查看网页的源代码时没有看到
标记，但是当我使用chrome的开发者控制台时却看到了它们。

这是表具有三行时的输出。

<html>
<head>
  <meta charset="UTF-8">
  <title>Events</title>
  <link rel="stylesheet">
</head>
<body>
  <div class="container">
    <div>
      <nav class="navbar" role="navigation" aria-label="main navigation">
        <div id="navbarBasic" class="navbar-menu">
          <div class="navbar-start">
            <a class="navbar-item" href="/events/A">A</a>
            <a class="navbar-item" href="/events/B">B</a>
            <a class="navbar-item" href="/events/C">C</a>
            <a class="navbar-item" href="/events/D">D</a>
          </div>
        </div>
      </nav>
    </div>
    <span class="title">B</span>
    <br><br><br>
    <table class="table is-fullwidth">
      <thead>
        <tr>
          <th>Timestamp</th>
          <th>Payload</th>
          <th>MetaData</th>
        </tr>
      </thead>
      <tbody>
        <tr></tr>
        <tr></tr>
        <tr></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

这是该表的输出有九行：

<html><head>
    <meta charset="UTF-8">
    <title>Events</title>
    <link rel="stylesheet">
</head>
<body>
<div class="container">
    <div><nav class="navbar" role="navigation" aria-label="main navigation">
        <div id="navbarBasic" class="navbar-menu">
            <div class="navbar-start">
                <a class="navbar-item" href="/events/A">A</a>
                <a class="navbar-item" href="/events/B">B</a>
                <a class="navbar-item" href="/events/C">C</a>
                <a class="navbar-item" href="/events/D">D</a>
            </div>
        </div>
</nav></div>
    <span class="title">A</span>
    <br><br><br><br><br><br><br><br><br><table class="table is-fullwidth">
        <thead>
        <tr>
            <th>Timestamp</th>
            <th>Payload</th>
            <th>MetaData</th>
        </tr>
        </thead>
        <tbody>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
        </tbody>
    </table>
</div>



</body></html>

由于我的雇主的政策，我已经从表行中删除了实际数据。

Answer 1

您的代码中意外的位置还有一个额外的<br />。由于它位于无效位置，因此Chrome会将其移到表格外，在那里您可以得到所有这些额外的行。

        <td>
            <pre lang="xml" th:text="${event.metaData}"></pre>
        </td>
        </br> <------------------- what is this for?
    </tr>
</th:block>

还有一些样式提示，我认为您的html应该如下所示：

<table class="table is-fullwidth">
    <thead>
    <tr>
        <th>Timestamp</th>
        <th>Payload</th>
        <th>MetaData</th>
    </tr>
    </thead>

    <tbody>
    <tr th:each="event :${data}">
        <td th:text="${event.timestamp}"></td>
        <td><pre lang="xml" th:text="${event.payload}" /></td>
        <td><pre lang="xml" th:text="${event.metaData}" /></td>
    </tr>
    </tbody>
</table>

不需要th:block（只需将th:each添加到<tr />）。我个人也将使用封闭的<pre />标签。

Thymleaf在表上方为表中的每一行添加空白

1 个答案: