Как скрыть границы столбцов строки таблицы HTML в режиме предварительного просмотра ТОЛЬКО там, где строка перекрывает нижний колонтитул? - PullRequest
Новая
       25

Как скрыть границы столбцов строки таблицы HTML в режиме предварительного просмотра ТОЛЬКО там, где строка перекрывает нижний колонтитул?

0 голосов
/ 16 мая 2019

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

Мне нужно скрыть границы перекрывающегося первого столбца в нижнем колонтитуле.

Следующее работает для последней страницы отчета, где нет перекрытия. 

@media print {

.myReport tfoot>tr>td {
  border: none !important;
}

.myReport tfoot {
  border: 1px solid #ddd !important;
}
}
<table>
  <tbody>
    <tr>
      <td rowspan="200">Group Header</td>
        <td>BBB</td>
        <td>BBB</td>
    </tr>

    <tr>
      <!-- 199 more times -->
      <td>BBB</td>
      <td>CCC</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="table-footer">
      <td colspan="3">AAAAA AAAAAAA AAAAAAA AAAAA AAAAAAA AAAAAAA</td>
    </tr>
  </tfoot>
</table>

Как скрыть границы столбцов строки таблицы HTML в режиме предварительного просмотра ТОЛЬКО там, где она перекрывает нижний колонтитул?

enter image description here

Строка до Просмотр 1-10 происходит из многорядного столбца, а не из нижнего колонтитула.

1 Ответ

0 голосов
/ 22 мая 2019

Решением было поднять порядок стека в нижнем колонтитуле. 

@media print {
    tfoot > tr > td.multiColumn {
        position: relative;
        z-index: 1;
    }
}

<table>
  <tbody>
    <tr>
      <td rowspan="200">Group Header</td>
        <td>BBB</td>
        <td>BBB</td>
    </tr>

    <tr>
      <!-- 199 more times -->
      <td>BBB</td>
      <td>CCC</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="table-footer">
      <td class="multiColumn" colspan="3">AAAAA AAAAAAA AAAAAAA AAAAA AAAAAAA AAAAAAA</td>
    </tr>
  </tfoot>
</table>
...