Thymleaf добавляет пробел над таблицей для каждой строки в таблице - PullRequest
Новая
       3

Thymleaf добавляет пробел над таблицей для каждой строки в таблице

0 голосов
/ 11 марта 2019

Я использую тимилеф, чтобы перебрать список и отобразить его в таблице следующим образом. 

<code><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}">
</ Й: блок>

Однако я обнаружил, что в 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>

Я удалил фактические данные из строк таблицы из-за политики моего работодателя.

1 Ответ

1 голос
/ 12 марта 2019

У вас есть лишний <br /> в неожиданном месте в вашем коде. Поскольку он находится в недопустимом месте, Chrome перемещает его за пределы таблицы, где вы получаете все эти дополнительные строки. 

<code>        <td>
            <pre lang="xml" th:text="${event.metaData}">
<------------------- для чего это нужно? </tr> </ Й: блок>

И некоторые советы по стилю, я думаю, ваш 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 />.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...