1

我有这样的 HTML：

<article>
    <header>
        <hgroup>
            <h1>Wk 25 </h1>
            <h2>(18-06 tot 24-06)</h2>          
        </hgroup>
        <p>Some info</p>
    </header>
    <table>
        <thead>
            <tr>
                <th class="legenda">Title</th>
                <th class="legenda">Title</th>
                <th class="legenda">Title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>content</td>
                <td>content</td>
                <td>content</td>
            </tr>
        </tbody>
    </table>
</article>

和这样的 CSS（摘录）：

article {
    padding: 0;
    margin-bottom: 15px;
    overflow: auto;
}
article header {
    background: url('header.png') repeat-x bottom center;
    padding: 4px 10px;
    cursor: pointer;
}

article-element 随浏览器窗口调整大小。里面的表格可以比文章元素更宽，因此溢出：自动。但是：标题元素有 100% 的宽度，所以如果你向右滚动，标题会变得不可见。

如果我给标题一个位置：绝对，我也需要给它一个固定的高度：不起作用，因为那里的高度取决于内容（变化）。

所以问题是，我希望它像现在一样渲染，除了当我向右滚动时标题保持可见。

4

3 回答 3

3

一种解决方案是将您的表格包装在它自己<div>的 中，与 分开<header>，并使用它自己的一组滚动条：

<article>
  <header><!-- ... --></header>

  <div style="overflow:auto">
    <table><!-- ... --></table>
  </div>
</article>

这样，标题似乎保持固定，但表格仍可左右滚动。

于 2012-06-18T13:14:12.327 回答
0

如果我理解正确，解决方案应该是放在float:right标题中。

另一件事：您不能简单地为 div 的高度提供相对 (%) 值。有一种方法，但我相信当它从其父 div 继承该属性时。

于 2012-06-18T13:08:43.970 回答
0

如果您希望标头左右和上/下保持在同一个位置，但不想在它出现的位置硬编码，您可以尝试使用相对定位进行潜水，将其放置在您想要的位置，然后放置固定的div。只要您不将其设置为上/左/下/右，则 div 应保持在其父级的 0,0 处。

于 2012-06-18T13:18:28.550 回答