Почему Colspan не работает - PullRequest
Новая
       7

Почему Colspan не работает

0 голосов
/ 31 мая 2018

У меня проблема с моим кодом, особенно с частью colspan.Вот мой код: 

    <table>
          <tr>
             <th>Phasen Name</th>
             <th>Planned Value</th>
             <th>Actual Cost</th>
             <th>Earned Value</th>
          </tr>
        <th:block th:each="eintrag : ${evaPhasen}">
          <tr>
             <td class="accordion" th:text="${eintrag.key}"></td>
             <td th:text="${eintrag.value.getPlannedValue()}"></td>
             <td th:text="${eintrag.value.getActualCost()}"></td>
             <td th:text="${eintrag.value.getEarnedValue()}"></td>
          </tr>
          <tr style="display:none">
            <td colspan="4">
              <table>               
                <tr>
                    <th>Workpackage Name</th>
                    <th>Planned Value</th>
                    <th>Actual Cost</th>
                    <th>Earned Value</th>
                </tr>
                <tr th:each="wpDetail : ${evaWP}">
                    <td class="accordion" th:text="${wpDetail.key}"></td> 
                    <td th:text="${wpDetail.value.getPlannedValue()}"></td>
                    <td th:text="${wpDetail.value.getActualCost()}"></td>
                    <td th:text="${wpDetail.value.getEarnedValue()}"></td>  
                </tr>   
            </table>
           </td>                
          </tr> 
         </th:block>
      </table>

Итак, мой вопрос: когда я открываю класс аккордеона, содержимое (таблица) отображается в первом столбце другой таблицы, а почему не во всех 4 столбцах?Я думаю, что я делаю что-то не так с.Вот изображение результата [colspan]: http://thumbs.picr.de/32846430ew.jpg

1 Ответ

0 голосов
/ 31 мая 2018

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

Итак, у вас есть table,Он начинается со строки с 4 th элементами.Затем у вас есть элемент th вне строки, который содержит строку с 4 td элементами.Я полагаю, возможно, вы хотели использовать thead.Но тогда вам не понадобятся элементы tr внутри него.Если я не ошибаюсь, вы неправильно вкладываете элементы типа строки и элементы типа ячейки.

Кроме того, элемент td с классом accordion пуст.Это может быть

Я не могу предложить намного больше, не зная тимелист, но ваш вывод в таблицу может выглядеть примерно так (по крайней мере, достигается colspan, работающий по назначению): 

    <table>
      <thead>
        <th>Phasen Name</th>
        <th>Planned Value</th>
        <th>Actual Cost</th>
        <th>Earned Value</th>
      </thead>
      <tr>
        <td class="accordion" th:text="${eintrag.key}"></td>
        <td th:text="${eintrag.value.getPlannedValue()}"></td>
        <td th:text="${eintrag.value.getActualCost()}"></td>
        <td th:text="${eintrag.value.getEarnedValue()}"></td>
      </tr>
      <tr>
        <td colspan="4">
          <table>
            <tr>
              <th>Workpackage Name</th>
              <th>Planned Value</th>
              <th>Actual Cost</th>
              <th>Earned Value</th>
            </tr>
            <tr th:each="wpDetail : ${evaWP}">
              <td class="accordion" th:text="${wpDetail.key}"></td>
              <td th:text="${wpDetail.value.getPlannedValue()}"></td>
              <td th:text="${wpDetail.value.getActualCost()}"></td>
              <td th:text="${wpDetail.value.getEarnedValue()}"></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

Это, как говорится, что th Я удалил, похоже, что это может быть каждый.Если это итератор, то вам может понадобиться, чтобы он повторялся в другом месте.Если вы сможете вставить фактический HTML-вывод вашего кода после применения шаблонов тимилиста, вам будет гораздо легче помочь широкой аудитории.

...