tags:

views:

38

answers:

2
+2  Q: 

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

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"&gt;
    <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?

Thanks in advance, Andrea.

A: 

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.

bpeterson76  2010-07-19 15:56:39
2. I used large number on purpose, to have the table overflow off the screen (I generated the table code with JavaScript and math.Random to avoid hand-typing it). In the actual report I have many small columns with integers, a column for each day of the month (yes, an infamous pivot table), so "cutting" the data it's not possible.
kappa  2010-07-19 16:16:24
3. Considering the many tiny columns said in #2, I don't think they can help me (but I treasure them for future needs), hiding columns is not possible.
kappa  2010-07-19 16:16:50
4. I don't know how big will be the screen of the user looking at the page, so this is quite a bet (providing I can fit all the column in a single screen width).
kappa  2010-07-19 16:18:27
1. I always used pt because I avoided px for its accessibility issues, but you're right, maybe em is a better choice.
kappa  2010-07-19 16:23:17
Actually, best practice on fonts that I've been taught is to specify base size in body definition, then make all others percentages of the base. So, you only have the need to define one (em/px/pt whatever) and then all else is relative to that.
bpeterson76  2010-07-19 16:29:47
+1  A: 

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.

Scott  2010-07-19 17:42:00
Your solution works perfectly, setting `.body` to `display: inline-block; margin: 5em 1em 1em 1em;` gives the content its spacing, and adding `display: inline-block; position: fixed; width: 100%;` to `h1` makes the header fixed visible on top (which is acceptable).
kappa  2010-07-20 08:48:31

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?