Question

我有一个显示一组数据的表。但是当我尝试使用 Control + P 或window.print();打印页面时，表格宽度不会响应纵向或横向。桌子宽度将超过纸张宽度。我该如何解决这个问题？

我的桌面标记：

    <table class="datatable">
            <thead>
                <tr>
                    <th class="sorting" width="15">ID</th>
                    <th class="sorting" width="15">Type</th>
                    <th class="sorting" width="30">Property Type</th>
                    <th class="sorting" width="50">Name/Address</th>
                    <th class="sorting" width="10">Block</th>
                    <th class="sorting" width="35">Unit</th>
                    <th class="sorting" width="35">Sqft</th>
                    <th class="sorting" width="35">$</th>
                    <th class="sorting" width="35">$/Sqft</th>
                                            <th class="sorting" width="35">R.Yield</th>
                                            <th class="sorting" width="35">Status</th>
                </tr>
            </thead>
            <tbody>

                <tr id="listing1" class="odd">
                    <td class="sorting_1">1</td>
                    <td>Sale</td>
                    <td>Apartment / Condo</td>
                    <td>
                        <a href="/index.php/listings/view/7" title="Parc Rosewood">Parc Rosewood</a>                            <br />
                        Default Administrator (12345678)
                    </td>
                    <td>10</td>
                    <td>08-90</td>
                    <td>227</td>
                    <td>$2,170,000</td>
                    <td>$9,559</td>
                    <td>
                        1%                      </td>
                    <td>
                        Available                       </td>
                </tr>

                <tr id="listing2" class="even">
                    <td class="sorting_1">2</td>
                    <td>Sale</td>
                    <td>Apartment / Condo</td>
                    <td>
                        <a href="/index.php/listings/view/3" title="Woodgrove Condo">Woodgrove Condo</a>                            <br />
                        John Doe (12345678)
                    </td>
                    <td>5</td>
                    <td>03-12</td>
                    <td>2,360</td>
                    <td>$1,900,000</td>
                    <td>$805</td>
                    <td>
                        --                      </td>
                    <td>
                        Available                       </td>
                </tr>

                <tr id="listing3" class="odd">
                    <td class="sorting_1">3</td>
                    <td>Sale</td>
                    <td>Apartment / Condo</td>
                    <td>
                        <a href="/index.php/listings/view/2" title="Casablanca">Casablanca</a>                          <br />
                        John Champion (12345678)
                    </td>
                    <td>7</td>
                    <td>01-36</td>
                    <td>1,326</td>
                    <td>$1,000,000</td>
                    <td>$754</td>
                    <td>
                        --                      </td>
                    <td>
                        Available                       </td>
                </tr>

            </tbody>
        </table>

CSS标记：

table {
    margin: 20px 0px 10px 0px;
    padding: 0px;
    border-collapse:collapse;
    border-spacing: 0px;
    width: 100%;
}
thead th { text-align: left; padding: 2px 5px; border-bottom: 1px solid #E0E0E0; }

截图： enter image description here

Answer 1

您的代码是正确的，并且表格宽度在打印预览时很好地扩展（在FF，IE9，Chrome上测试...在A4上打印，缩放到100％ - 不缩小）。检查打印机默认设置和浏览器打印首选项（页面设置和缩放）。

Answer 2

如果您希望CSS可以调整打印，则必须打开“@media print”规则。

示例：

@media print {
    /* any css rule */
    table {
    margin: 20px 0px 10px 0px;
    padding: 0px;
    border-collapse:collapse;
    border-spacing: 0px;
    width: 100%;
    }
    thead th { text-align: left; padding: 2px 5px; border-bottom: 1px solid #E0E0E0; }
}

Answer 3

我找到了解决方案，似乎我的包装工具看起来像个小丑。

Html标记

<div class="wrapper">
     <div class="container">
          <div class="row">

CSS标记

.row {
     width: 100%;
     max-width: 1440px;
     min-width: 1200px;
     margin: 0px auto;
 }

更正CSS标记（在打印媒体查询上执行此操作）

.row {
     width: 100%;
     margin: 0px auto;
 }

感谢您的帮助！

打印，表格不响应人像和风景

3 个答案: