我正在编写一个简单的网络报告，其布局简单，供内部使用。
布局由顶部的标题和下面的内容组成，通常是表格和更多内容(非常简单)。
我的问题是，当表格大于浏览器的视口(viewport)时，布局会困惑:标题与视口(viewport)一样宽，而不是页面 body 所以当我向右滚动时它会消失屏幕上，表格的右边框贴在视口(viewport)右侧，即使我为正文留出了边距。
一个干净的测试页面的 HTML 代码是(为了轻便减少了 tr 元素的数量):
<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>
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 有同样的问题):
我怎样才能使标题正确(当文本在“第一个”视口(viewport)中居中时背景颜色向右拉伸(stretch)，保持固定不动，其他漂亮的想法)，并使表格的右边框与页面的边框？
提前致谢，安德里亚。
最佳答案
好吧，就让表格在左边有空隙而言，将您的 .body 类设置为:
.body {display: inline-block; padding: 10px;}
要让您的 header 执行您想要的操作会更加复杂。如果您有固定的标题高度，那么我建议通过带有 repeat-x 的图像将该颜色作为您的 body 标签背景的一部分。如果不是固定高度，那我还没有想出解决办法。
关于html - 标题的 CSS 问题以及表格和页面边框之间缺少正确的空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3282411/