Home > database >  Using Thymeleaf to set column widths in a table
Using Thymeleaf to set column widths in a table

Time:10-26

I have a table, where the first column will be of a fixed width, and the remaining column widths will take up the remaining pace equally. The issue is that the columns are generated using th:each and the number of columns will vary.

How can I set the first column to a fixed width, and divide the remaining space equally between an unknown number of columns?

    <thead>
        <tr>
            <th style="width: 25%">
                Fixed width
            </th>
            <th th:each="instance: ${headers}">
                Dynamic width
            </th>   
        </tr>
    </thead>

CodePudding user response:

You can calculate the widths like this:

<thead th:with="fixed_width=25, dynamic_width=${(100 - fixed_width) / (#lists.size(headers) - 1)}">
  <tr>
    <th th:each="instance, status: ${headers}" th:style="|width: ${status.first ? fixed_width : dynamic_width}%|">
      Dynamic width
    </th>   
  </tr>
</thead>
  • Related