I am writing a simple web report with a simple layout for internal use.
The layout consists of a heading at the top and the content below, usually a table, and a little more (very simple).
My problem is that when the table is larger than the browser viewing area, the layout is confused: the title is wide as a viewport, not a page body, so when I scroll it, it disconnects from the screen, on the right the table border is glued to the right side viewing windows, although I am the edge of the body.
HTML code of a clean test page (number of elements trreduced for ease):
<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>
Content style.css:
* { 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; }
Mozilla Firefox 3.6.6 (Internet Explorer 8.0.6001.18702 ):
( , "" ", , , ), , ?
, .