javascript - 让 Google Chrome td 在打印页面上换行

Question

在我的网站上，当我按下结果按钮时，结果表以正确的格式显示，例如第一张图片 但是当我点击打印按钮时，表格 formate 被损坏了 有 2 张图片说明了问题

        <table class="table table-bordered">
            <tr class="print-header">
                <th class="table-head" ng-repeat="cols in headercolumns">{{cols}}</th>
            </tr>

            <tr class="table-row" ng-repeat="scoresheet in scoresheets |filter:class">
                <td>
                    <p style="font-size : 20px">{{scoresheet.user.name}}</p>
                    <span>{{scoresheet.user.class.name}}</span>
                </td>
                <td><p style="font-size : 20px">{{scoresheet.result.statistics.score |number}}</p></td>
                <td><p style="font-size : 20px">{{scoresheet.result.statistics.correct_answers}}</p></td>
                <td><p style="font-size : 20px">{{scoresheet.result.statistics.incorrect_answers}}</p></td>
                <td><p style="font-size : 20px">{{scoresheet.result.statistics.partial_answers}}</p></td>
                <td><p style="font-size : 20px">{{scoresheet.result.statistics.pending_answers}}</p></td>
                <td><p style="font-size : 20px">{{scoresheet.result.statistics.skipped_answers}}</p></td>
              </tr>

result table printing table

Answer 1

这解决了我的问题。

@media print {
    td {
        display: table-cell !important; 
    } 
}