Удаление границы таблицы внутри tfoot и thead
Я хочу удалить border внутри области tfoot и thead при печати. Когда строка таблицы была разбита на новую страницу, граница продолжает отображаться даже внутри области tfoot, а также области thead. Это скриншот проблемы:
Мой код:
@media print {
.report-container {
page-break-after: always;
}
thead.report-header {
display: table-header-group;
}
tfoot.report-footer {
display: table-footer-group;
border: none;
}
#spacer {
height: 230px;
}
#footer {
position: fixed;
bottom: 0;
border: none;
}
}<table class = "report-container" width = "100%" style = "" cellspacing = "1" cellpadding = "5">
<thead class = "report-header">
<tr>
<td width = "" align = "left">
<?php if ($so_invoice_report_row['has_header_footer']) { echo html_entity_decode($rowHeaderFooter['header_content']); } else {} ?>
</td>
</tr>
</thead>
<tfoot class = "report-footer">
<tr>
<td width = "" align = "left" id = "spacer"></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<?php
//include 'table_content.php';
?>
<table border=1 style = "border-collapse: collapse;">
<?php
for($i=0; $i<=100;$i++) {
echo '<tr><td>';
echo "Column " . $i . '</td><td> Column2 ';
echo '</td></tr>';
}
?>
</table>
</td>
</tr>
</tbody>
</table>
<div id = "footer">
<?php if ($so_invoice_report_row['has_header_footer']) { echo html_entity_decode($rowHeaderFooter['footer_content']); } else {} ?>
</div>
Ответы 2
В таблице стилей CSS удален position: fixed; bottom: 0; из #footer, как показано ниже, и применено значение высоты для нижнего колонтитула.
@media print {
.report-container {
page-break-after: always;
}
thead.report-header {
display: table-header-group;
background-color:red;
}
tfoot.report-footer {
display: table-footer-group;
border: none;
background-color:green;
}
tbody {
background-color:blue;
}
#spacer {
margin-bottom: 150px;
}
#footer {
border: none;
}
}
<table class = "report-container" width = "100%" style = "" cellspacing = "1" cellpadding = "5">
<thead class = "report-header">
<tr>
<th width = "" align = "left">
<?php if ($so_invoice_report_row['has_header_footer']) { echo html_entity_decode($rowHeaderFooter['header_content']); } else {} ?>
</th>
</tr>
</thead>
<tfoot class = "report-footer" id = "spacer">
<tr>
<td><?php if ($so_invoice_report_row['has_header_footer']) { echo html_entity_decode($rowHeaderFooter['footer_content']); } else {} ?>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td><?php
include 'table_content.php';
?>
</td>
</tr>
</tbody>
</table>
Это сработает для вас. Попытайся. Сообщите мне, если возникнут какие-либо проблемы.
Раньше я не замечал. ваш формат HTML-кода неверен. почему бы вам не поместить <div id = "footer"> в свой <tfoot>?
Я обновил свой ответ. Используйте этот HTML-код и дайте мне знать, каков ваш результат. Немного сложно решить эту проблему, не видя кода.
При удалении position: fixed; bottom: 0; нижний колонтитул последней страницы помещается прямо под последним элементом tbody. Вот почему я добавил div с идентификатором нижнего колонтитула. Проверено с использованием вашего последнего кода, но граница все еще видна в области tfoot и thead. Кстати, я использую Chrome, чтобы проверить это.
Тем не менее, я гость, мне нужно заглянуть в файл table_content.php, если он является причиной проблемы. Поскольку в настоящее время внутри него много вложенных таблиц (файл был давно создан кем-то другим, поэтому я действительно не знаю форматирования)
Я заменил include_content.php тестовым циклом for, описанным выше. Не могли бы вы попробовать его на своем местном рынке и посмотреть, не столкнетесь ли вы с той же проблемой, что и моя? Поскольку я не мог решить эту проблему даже при использовании вашего обновленного кода. Спасибо
Я не могу воспроизвести ваш результат ... Не могли бы вы опубликовать немного сгенерированного html, который показывает проблему (я имею в виду, фактически содержащий данные таблицы вместо -stuff).
НО, если я вас правильно понял, вы пытаетесь освободить отмеченное пространство для корпоративного верхнего и нижнего колонтитула, уже содержащихся на бумаге, которую вы используете. В этом случае у меня есть обходной путь для вас
Добавьте белые (что означает:
background: white;) divs желаемого размера с фиксированной позицией и более высоким z-индексом вверху и внизу вашей html-страницы, содержащей ваши дополнительные данные заголовка *Добавьте пустые блоки div с относительным позиционированием и размером вашего верхнего / нижнего колонтитула до и после содержимого вашей html-страницы, чтобы весь контент не «уходил под» другие элементы верхнего / нижнего колонтитула (я думал, что использование заполнения также должно работать, но здесь это не сделал)
Оставьте thead и tfooter пустыми - просто измените его размер, чтобы он не попадал под другие элементы верхнего / нижнего колонтитула.
Попробуй это.
*) Примечание: очевидно (по крайней мере, в Opera 54.0) белый цвет фона никогда не игнорируется, но если ваш верхний / нижний колонтитул при печати кажется прозрачным, а не белым, поищите параметр «печатать фоновые изображения»
У меня есть требование добавить верхний и нижний колонтитулы в текущие шаблоны (отсюда и использование include 'table_content.php';). Итак, я использую теги thead и tfoot для достижения этой цели, но проблема в том, что данные не помещаются на 1 страницу ... горизонтальная граница видна в области tfoot и thead (область, которую я выделил красным).
У вас есть какой-нибудь пример кода для решения этой проблемы? В моей области верхнего и нижнего колонтитула все еще есть граница таблицы.
Конечно. Или, может быть, на самом деле. Не могли бы вы опубликовать фрагмент html, в котором теги <php> заменены фактическим содержанием? Затем я проверю, смогу ли я заставить предложенный обходной путь работать.
Попытка выполнить согласно предложенному, но нижний колонтитул
divтеперь не повторяется на каждой странице. Он отображается только поверх третьей страницы (это последняя страница, таблица только до страницы 2)