CSS issue with header and missing right space between table and page's border_问答_开发者

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>
          开发者_C百科          </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):

CSS issue with header and missing right space between table and page's border

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?

Thanks in advance, Andrea.

Well, as far as getting the table to have the gap at the left, set your .body class to this:

.body {display: inline-block; padding: 10px;}

To get your header to do what you desire is more complicated. If you have a fixed header height, then I suggest putting that color as part of your body tag background via an image with repeat-x on it. If it is not a fixed height, then I have not come up with a solution for that.

Ok, so a couple things going on:

1) First consider switching units on your css fro pts to px or em. Pts are rendered differently by different browsers, so you can't count on them to effectively size things uniformly.

2) The numbers you're displaying are quite large. Could you cut down on the decimal points via the backend? Drop the font size down more? Limiting the data is unfortunate, but it's something that we as UI people often have to deal with. And not surprisingly, it's something that the business and marketing people seem to have little ability to adapt to.

3) Consider a different design pattern such as this: http://datatables.net/examples/server_side/row_details.html or using something such as Qtip (http://craigsworks.com/projects/qtip/) to display extended data. In particular, datatables allows some great sorting and searching that your users will find invaluable. Also, it can hide columns that can still be searched on. Try the green plus button in the example above.

4) Implicitly set your td widths. Use CSS (best) or inline a "style" if they each need to be different. Set overflow to none at last resort.