Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 52 из 53 · 14 мин
@media print, @page, break-inside, а также border-collapse, border-spacing, table-layout и caption-side.
Печатаю прайс — а там шапка, кнопки, а таблица разорвана посередине строки.
Для бумаги свои правила: прячем лишнее, не рвём строки, задаём поля листа.
@media print@media print { nav, button { display: none; } }.@page@page { margin: 2cm; size: A4; }.break-insidebreak-inside: avoid — блок не разрывается между страницами.border-collapsecollapse — соседние рамки ячеек сливаются в одну линию.<style>
table { border-collapse: collapse; } td { border: 1px solid #c8763a; padding: 4px 8px; }
</style>
<table><tr><td>Ручка</td><td>220 ₽</td></tr><tr><td>Пенал</td><td>290 ₽</td></tr></table>border-spacingborder-collapse: separate.<style>
table { border-spacing: 6px; } td { background: #fdf6ec; padding: 4px 8px; }
</style>
<table><tr><td>Ручка</td><td>220 ₽</td></tr></table>table-layoutfixed — ширины колонок по первой строке, быстро и предсказуемо.caption-sidecaption-side: bottom — подпись таблицы снизу.<style>
table { caption-side: bottom; } caption { font-size: 12px; color: #7c3f1d; }
</style>
<table><caption>Цены на ноябрь</caption><tr><td>Ручка</td><td>220 ₽</td></tr></table>:nth-child(even)tr:nth-child(even) { background: … } — каждая вторая строка.<style>
tr:nth-child(even) { background: #fdf6ec; } td { padding: 3px 8px; }
</style>
<table><tr><td>Ручка</td></tr><tr><td>Пенал</td></tr><tr><td>Ластик</td></tr></table>Печатная версия — это одна медиа-секция: спрятать лишнее, не рвать блоки.
Задай table border-collapse: collapse, а строкам tr:nth-child(even) — фон #fdf6ec.
Внутри @media print спрячь nav (display: none) и запрети разрыв строк tr (break-inside: avoid).
Выберите один ответ.
Как убрать двойные рамки между ячейками таблицы?
Выберите один ответ.
Какое свойство не даёт блоку разорваться между печатными страницами?
Проверяем состояние обучения…