0

I have this piece of HTML that when I try to print it (in Chrome or Safari), the table is simply cut off, instead of spanning to multiple pages.

Does anyone have a workaround for this? Or some CSS I could apply to fix it?

<!doctype html>
<html>
    <body>
        <table>
            <tr>
                <td><div>this_is_box_a</div></td>
                <td><div>this_is_box_b</div></td>
                <td><div>this_is_box_c</div></td>
                <td><div>this_is_box_d</div></td>
                <td><div>this_is_box_e</div></td>
                <td><div>this_is_box_f</div></td>
                <td><div>this_is_box_g</div></td>
                <td><div>this_is_box_h</div></td>
                <td><div>this_is_box_i</div></td>
                <td><div>this_is_box_j</div></td>
                <td><div>this_is_box_k</div></td>
                <td><div>this_is_box_l</div></td>
                <td><div>this_is_box_m</div></td>
                <td><div>this_is_nox_n</div></td>
            </tr>
        </table>
    </body>
</html>

As an aside, the reason I'm using the <div> is to be able to do the following, which also exhibits the same issue.

<!doctype html>
<html>
    <head>

        <style>
            body {
                margin-top: 20em;
            }

            td {
                position: relative;
            }

            div {
                position: absolute;
                bottom: -3px;
                -webkit-transform: rotate(-45deg);
                -webkit-transform-origin: 0% 0%;
            }
        </style>

    </head>

    <body>
        <table>
            <tr>
                <td><div>this_is_box_a</div></td>
                <td><div>this_is_box_b</div></td>
                <td><div>this_is_box_c</div></td>
                <td><div>this_is_box_d</div></td>
                <td><div>this_is_box_e</div></td>
                <td><div>this_is_box_f</div></td>
                <td><div>this_is_box_g</div></td>
                <td><div>this_is_box_h</div></td>
                <td><div>this_is_box_i</div></td>
                <td><div>this_is_box_j</div></td>
                <td><div>this_is_box_k</div></td>
                <td><div>this_is_box_l</div></td>
                <td><div>this_is_box_m</div></td>
                <td><div>this_is_nox_n</div></td>
            </tr>
            <tr>
                <td>this_is_box_a</td>
                <td>this_is_box_b</td>
                <td>this_is_box_c</td>
                <td>this_is_box_d</td>
                <td>this_is_box_e</td>
                <td>this_is_box_f</td>
                <td>this_is_box_g</td>
                <td>this_is_box_h</td>
                <td>this_is_box_i</td>
                <td>this_is_box_j</td>
                <td>this_is_box_k</td>
                <td>this_is_box_l</td>
                <td>this_is_box_m</td>
                <td>this_is_nox_n</td>
            </tr>
        </table>
    </body>
</html>

To clarify slightly more, when I print the document, I get one page of output. That page of output looks like the following. I'd like it to span to 2 pages instead.

image showing cut off text

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Bill Lynch
  • 80,138
  • 16
  • 128
  • 173
  • span to multiple pages? You mean like continue running and enabling a horizontal scroll bar? If so, I just tested and Chrome has no problem doing that. Can't test on safari, but I would think it wouldn't either. Perhaps your added css is the problem. – Nick Rolando Nov 01 '11 at 22:51
  • @Shredder: It's a problem when I attempt to print the page. – Bill Lynch Nov 02 '11 at 02:32
  • @Shredder: The problem also exists on the first edition of the HTML. That version has no additional CSS included. – Bill Lynch Nov 02 '11 at 02:58
  • Oh sorry, I totally read that wrong – Nick Rolando Nov 02 '11 at 05:20

1 Answers1

0

Do you mean that the table goes off the edge of the page, only when printed? Can't you just set the width of the table, and of the individual columns in css.

Give the tds in the first row separate classes and set widths accordingly. If you only need the css to change the printed output you can set a separate print only stylesheet.

Dean Marshall
  • 1,825
  • 1
  • 11
  • 10
  • I don't automatically know the width of the columns.. I'd like that to be automatically generated by the rendering engine... I'm not sure what that would get me anyways. – Bill Lynch Nov 02 '11 at 02:33
  • Well - I was thinking if you narrowed the columns you'd get them all on a single page and avoid the issue. Alternatively I think you are looking at similar css to this previous question: [link](http://stackoverflow.com/questions/1763639/how-to-deal-with-page-breaks-when-printing-a-large-html-table) – Dean Marshall Nov 02 '11 at 16:21
  • In the real place that I'm using this, I have more columns than are shown here. It's also not possible to shrink the width of them. Most columns hold an integer value of 0 or 1. – Bill Lynch Nov 02 '11 at 16:59