打印，表格不响应纵向和横向答案

【问题标题】：Printing, table does not respond to portrait and landscape打印，表格不响应纵向和横向
【发布时间】：2012-06-23 09:11:38
【问题描述】：

我有一个显示一组数据的表格。但是当我尝试使用 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; }

截图：

【问题讨论】：

标签： html css html-table media-queries

【解决方案1】：

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

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;
 }

感谢大家的帮助！

【讨论】：

【解决方案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; }
}

【讨论】：

【解决方案3】：

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

【讨论】：

我尝试过其他网站也使用表格来显示他们的数据，但使用打印预览时似乎没问题。