Хобрук: Ваш путь к мастерству в программировании

Ошибка при печати таблицы Bootstrap в Chrome

У меня странная ошибка, когда я хочу распечатать свою веб-страницу в Chrome. Я показываю таблицу с помощью Bootstrap, которая идеально подходит для размера экрана (каким бы ни был размер экрана). Когда я хочу распечатать веб-страницу в Chrome, таблица обрезается, тогда как макет печати идеально подходит для Firefox.

Мне удалось воспроизвести мою ошибку в JSFiddle здесь.

HTML-код моей таблицы:

<table class="table table-condensed">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="...">
            <td>...</td>
            <!-- ... -->
        </tr>
        <tr class="separator empty" />
    </tbody>
</table>

У вас есть идеи, как решить эту проблему?
Может быть, вы используете другой CSS-класс Bootstrap для таблицы?

google-chrome html css angularjs twitter-bootstrap
11.03.2015

Ответы:


1

При указании начального размера масштабирования печатается все содержимое.

@media print {
    body {
        zoom: .8
    }
}

Скрипт: http://jsfiddle.net/HB7LU/11671/

11.03.2015
  • Спасибо, это все еще странная ошибка, но ваш обходной путь помог. 11.03.2015
  • Просто обходной путь, а не исправление. В моем случае не помогло. 09.06.2017

    • 2

    В Bootstrap 3 есть известная ошибка, которая, кажется, была отложена до Bootstrap 4. Ошибка связана с отзывчивостью, применяемой в печатных стилях.

    В моем случае изменение всех моих классов col-sm-* на col-xs-* сработало отлично.

    09.06.2017
    Новые материалы
    Я собираюсь научить вас Python шаг за шагом
    Привет, уважаемый энтузиаст Python! 👋 Готовы погрузиться в мир Python? Сегодня я приготовил для вас кое-что интересное, что сделает ваше путешествие более приятным, чем шарик мороженого в..
    Альтернатива шаблону исходящих сообщений для архитектуры микросервисов
    Познакомьтесь с двухэтапным сообщением В этой статье предлагается альтернативный шаблон для папки Исходящие : двухэтапное сообщение. Он основан не на очереди сообщений, а на..
    React on Rails
    Основное приложение Reverb - это всеми любимый монолит Rails. Он отлично обслуживает наш API и уровень просмотра трафика. По мере роста мы добавляли больше интерактивных элементов..
    Что такое гибкие методологии разработки программного обеспечения
    Что представляют собой гибкие методологии разработки программного обеспечения в 2023 году Agile-методологии разработки программного обеспечения заключаются в следующем: И. Введение A...
    Ториго  — революция в игре Го
    Наш следующий вызов против ИИ и для ИИ. Сможет ли он победить людей в обновленной игре Го? Обратите внимание, что в следующей статье AI означает искусственный интеллект, а Goban  —..
    Простое развертывание моделей с помощью Mlflow — Упаковка классификатора обзоров продуктов NLP от HuggingFace
    Как сохранить свои модели машинного обучения в формате с открытым исходным кодом с помощью MLFlow, чтобы позже получить возможность легкого развертывания. Сегодня модели упаковки имеют несколько..
    Математика и интуиция - Часть 1
    У каждой математической формулы есть доказательство. Часто эти доказательства слишком сложно понять, поскольку многие из них основаны на индукции, некоторые - на очень сложных наблюдениях, а..