Multiple items in table cell-CodePudding

I am using thymeleaf to develop a website and it's been working fine for me so far however when I want to present multiple items in single in the table it will instead add extra seperate cells on the row where the values exist. I have no solution to that problems so far, if anyone else might see what I'm missing I'd greatly appreciate it.

Thanks in advance!

Code(EDITED)

Here I first check if there are handlers(in the database) then I put them all in a list using the foreach, but I have no way of putting all the items in the single cell(or table data represented here by the tag ). I've put the logic inside the tag which worked somewhat well however rows with no data get extra cells, like in the picture below.

<td > th:if="${place.getHandler} != null" th:each="handlerList : ${place.getHandler}" th:text="${handlerList.name}"></td>

New Code

<td> <span th:if="${place.getHandler} != null" th:each="handlerList : ${place.getHandler}" th:text="${handlerList.name}"></span></td>

The entire code

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="has-navbar-fixed-top">
<head th:replace="common_fragments/header :: header">
    <meta charset="utf-8">
    <link rel="stylesheet" href="../../../../public/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../../../../public/css/bulma_custom.min.css"/>
</head>
<body>

<div id="navbar-top">
    <nav th:replace="logged_in/admin/fragments/navbar :: nav"></nav>
</div>
<main>
    <section class="section">
        <div class="container">
            <h1 class="title">
                 matchade studenter
            </h1>
            <hr>
            <div class="content is-medium">
                <table id="table" class="table is-bordered is-narrow is-hoverable">
                    <thead>
                    <tr>
                        <th>Student</th>
                        <th>Student email</th>
                        <th>Student mobilnummer</th>
                        <th>Enhet</th>
                        <th>Handledare</th>
                        <th>Handledare email</th>
                        <th>Handledare mobilnummer</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="place : ${places}">
                        <td th:text="${place.student.studentData.name}"></td>
                        <td th:text="${place.student.studentData.email}"></td>
                        <td th:if="${place.student.studentData.phoneNumber} != ''" th:text="${place.student.studentData.phoneNumber}"></td>

                        <td th:if="${place.student.studentData.phoneNumber} == ''" >
                            <p class="icon has-text-danger">
                                <i class="fa fa-lg fa-times"></i>
                            </p>

                        </td>



                        <td th:text="|${place.unit.name} (Regioner: ${place.unit.municipality.getRegionNamesString}, Kommuner:  ${place.unit.municipality.name})|"></td>

                        <td> <span th:if="${place.getHandledare} != null" th:each="handledareList : ${place.getHandledare}" th:text="${handledareList.name}"></span></td>
                        <td th:if="${place.getHandledare} != null" th:text="${place.getHandledare[0].email}"></td>


                        <td th:if="${place.getHandledare} == null">
                            <p class="icon has-text-danger">
                                <i class="fa fa-lg fa-times"></i>
                            </p>
                        </td>

                        <td th:if="${place.getHandledare} == null">
                            <p class="icon has-text-danger">
                                <i class="fa fa-lg fa-times"></i>
                            </p>
                        </td>


                        <div th:if="${place.getHandledare} != null">
                        <td th:if="${place.getHandledare[0].phoneNumber} != ''" th:text="${place.getHandledare[0].phoneNumber}"></td>
                        </div>

                        <div th:if="${place.getHandledare} == null">
                            <td >
                                <p class="icon has-text-danger">
                                    <i class="fa fa-lg fa-times"></i>
                                </p>

                            </td>
                        </div>

                        <div th:if="${place.getHandledare} != null">
                            <td th:if="${place.getHandledare[0].phoneNumber} == '' ">

                            <p class="icon has-text-danger">
                                    <i class="fa fa-lg fa-times"></i>
                                </p>
                            </td>

                            </td>
                        </div>



                    </tr>
                    </tbody>

                </table>
                <br>
                <button class="button is-large is-success"  id="download-button">ladda ner matchning resultat</button>
                <br>
                <br>

            </div>
        </div>
    </section>
</main>

<footer th:replace="common_fragments/footer :: footer"></footer>




<script>
    function htmlToCSV(html, filename) {
        var data = [];
        var rows = document.querySelectorAll("table tr");

        for (var i = 0; i < rows.length; i  ) {
            var row = [], cols = rows[i].querySelectorAll("td, th");

            for (var j = 0; j < cols.length; j  ) {
                row.push(cols[j].innerText);
            }

            data.push(row.join(";"));
        }

        downloadCSVFile(data.join("\n"), filename);
    }
</script>


<script>
    function downloadCSVFile(csv, filename) {
        var csv_file, download_link;

        csv_file = new Blob(["\uFEFF" csv], {type: "text/csv"});

        download_link = document.createElement("a");

        download_link.download = filename;

        download_link.href = window.URL.createObjectURL(csv_file);

        download_link.style.display = "none";

        document.body.appendChild(download_link);

        download_link.click();
    }
</script>

<script>
    document.getElementById("download-button").addEventListener("click", function () {
        var html = document.querySelector("table").outerHTML;
        htmlToCSV(html, "matchning.csv");
    });
</script>

</body>
</html>

CodePudding user response：

You can move your Thymeleaf logic from the <td> tag into a tag inside the <td> tag - for example, a <span>:

<td>
    <span th:if="${place.getHandler} != null" 
          th:each="handlerList : ${place.getHandler}" 
          th:text="${handlerList.name}"></span>
</td>

From there you can add whatever CSS you may need to format the spans.

If you have extra <td> cells you need to suppress, then move the th:if expression to inside the <td> tag:

<td th:if="${place.getHandler} != null">
    <span th:each="handlerList : ${place.getHandler}" 
          th:text="${handlerList.name}"></span>
</td>