Question

我正在编写一个简单的网页报告，其中包含一个内部使用的简单布局。

布局包含顶部的标题和下面的内容，通常是表格和更多（非常简单）。

我的问题是，当表格大于浏览器的视口时，布局会混乱：标题作为视口宽而不是页面body所以当我向右滚动时它会离开屏幕，即使我是身体的边缘，桌子的右边界也会粘在视口右侧。

干净测试页的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有同样的问题）：

enter image description here

如何使标题正确（背景颜色向右伸展，而文本在“第一个”视口中居中“，保持固定而不移动，其他漂亮的想法），并使表格的右边界与页面的边框？

先谢谢，安德烈。

Answer 1

好吧，只要让表格在左边有间隙，请将.body类设置为：

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

让你的标题做你想做的更复杂。如果您有一个固定的标题高度，那么我建议将该颜色作为body标记背景的一部分，通过带有repeat-x的图像。如果它不是一个固定的高度，那么我还没有想出一个解决方案。

Answer 2

好的，所以有几件事情要发生：

1）首先考虑将css上的单位从pts切换到px或em。不同浏览器对Pts的呈现方式不同，因此您无法依靠它们来统一有效地调整大小。

2）您显示的数字非常大。你能通过后端减少小数点吗？减少字体大小？限制数据是不幸的，但这是我们作为UI人员经常需要处理的事情。毫不奇怪，这是商业和营销人员似乎没有什么能力适应的东西。

3）考虑一个不同的设计模式，例如：http://datatables.net/examples/server_side/row_details.html或使用诸如Qtip（http://craigsworks.com/projects/qtip/）之类的东西来显示扩展数据。特别是，数据表允许您的用户发现一些非常有价值的排序和搜索。此外，它可以隐藏仍可以搜索的列。尝试上面示例中的绿色加号按钮。

4）隐式设置你的td宽度。如果每个都需要不同，请使用CSS（最佳）或内联“样式”。最后将溢出设置为无。

带有标题的CSS问题以及表和页面边框之间缺少正确的空格

2 个答案: