Question

I have a table that displays a set of data. But when I try to print the page using Control+P or window.print();, the table width does not respond to portrait or landscape orientation. The table width will exceed the paper width. How can I fix this?

My table markup:

    <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 Markup:

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

Screenshot:

Answer 1

I have found the solution, it seems that my wrapper is making look like a clown.

Html Markup

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

CSS Markup

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

Correct CSS Markup (Doing this on a print media-queries)

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

Thanks for the all the help!