Hi, I'm writing a simple web report with a simple layout for internal use.

The layout consists in a header on top and a content below, usually a table and a little more (very simple).

My problem is that when the table is larger than the browser's viewport, the layout messes up: the header is wide as the viewport and not as the page body so when I scroll right it goes off screen, an the right border of the table is stuck against the viewport right side even though I a margin for the body.

The HTML code of a clean test page is (number of tr elements reduced for lightness):

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <link type="text/css" rel="stylesheet" href="style.css">
        <title>Test page</title>
    </head>
    <body>
        <h1>
            Test page
        </h1>
        <div class="body" id="body">
            <p>
                This is a test page.</p>
            <table class="shiny_table">
                <thead>
                    <tr>
                        <th>
                            0
                        </th>
                        <th>
                            1
                        </th>
                        <th>
                            2
                        </th>
                        <th>
                            3
                        </th>
                        <th>
                            4
                        </th>
                        <th>
                            5
                        </th>
                        <th>
                            6
                        </th>
                        <th>
                            7
                        </th>
                        <th>
                            8
                        </th>
                        <th>
                            9
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            0.9721986181295992
                        </td>
                        <td>
                            0.6041465194175369
                        </td>
                        <td>
                            0.5777094598685739
                        </td>
                        <td>
                            0.9741661116808004
                        </td>
                        <td>
                            0.8224265079662112
                        </td>
                        <td>
                            0.7236314528096713
                        </td>
                        <td>
                            0.24133248609797375
                        </td>
                        <td>
                            0.8836446393181888
                        </td>
                        <td>
                            0.02439762941899959
                        </td>
                        <td>
                            0.8171104825665716
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

The content of style.css is:

* { font-family: Verdana, Arial, Sans Serif; font-size: 10pt; }
html, body { margin: 0pt; padding: 0pt; }
body { background-color: rgb(192, 255, 192); }
h1 { margin: 0pt; padding: 10pt; font-size: 20pt; background-color: rgb(192, 192, 255); text-align: center; text-transform: uppercase; }
.body { margin: 10pt; }
.shiny_table, .shiny_table th, .shiny_table td { border: solid 1pt rgb(192, 192, 192); border-collapse: collapse; }
.shiny_table th, .shiny_table td { padding: 5pt; }

This is how it shows in Mozilla Firefox 3.6.6 (Internet Explorer 8.0.6001.18702 has the same problem):

Screenshot 1 - Screenshot 2 - Screenshot 3

How can I have the header right (have the background colour stretch to the right while the text is centered in the "first" viewport", stay fixed without moving, other pretty ideas), and have the table's right border spaced from the page's border?

Please note that the long number are intentional, to have the table overflow. In the actual report I have many columns (= 35) with integers (so I can't round the numbers).

Thanks in advance, Andrea.

1 answer

1
point

The problem is that block elements, such as the h1 and the div.body, are the width of the viewport by default. You can verify this by applying a border to them. The table then overflows out of the div.

One solution is to apply fixed positioning to the heading so that it will not scroll with the page. The down side is that it will still be visible as you scroll down the page, too.

Add this to your CSS:

h1 { position: fixed; width: 100%; left: 0px; top: 0px; }
.body { margin-top: 50px; }

The extra margin-top on the .body is so the content does not disappear behind the h1.

Answered over 6 years ago by Phil Aylesworth
  • Hi, thanks for your answer. I made the following changes: to `h1` I added `display: inline-block; position: fixed; width: 100%;` and `.body` now is `display: inline-block; margin: 5em 1em 1em 1em;` (I also changed the units to `em`). Now the header is fixed visible (it's acceptable to me) and the table has its right margin. kappa over 6 years ago
  • D'oh, markup won't work in comments... :\ kappa over 6 years ago