0

データセットを表示するテーブルがあります。しかし、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; }

スクリーンショット： ここに画像の説明を入力してください

4

3 に答える 3

0

私は解決策を見つけました、私のラッパーはピエロのように見えているようです。

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

すべての助けをありがとう！

于 2012-06-21T08:07:54.563 に答える
0

コードは正しく、テーブル幅は印刷プレビューでうまく拡大します（FF、IE9、Chromeでテスト済み... A4で印刷、100％に拡大縮小-縮小なし）。プリンタのデフォルト設定とブラウザの印刷設定（ページ設定とスケーリング）を確認してください。

于 2012-06-21T07:34:04.327 に答える
0

CSSを印刷用に調整できるようにする場合は、「@mediaprint」ルールを開く必要があります。

例：

@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; }
}
于 2012-06-21T07:48:52.717 に答える