Question

我有需要显示宽表的网站。上面是标题，应该与整页一样宽（在这种情况下，与表格一样宽）。然而，它只有视口（屏幕大小）宽，因此在显示时它看起来没问题，但是一旦用户滚动到侧面，他就会看到标题没有它应该的那么宽。如何在没有硬编码值的情况下将此标题拉伸到整页宽度？

简单示例：

HTML：

<div></div>
<table>
    <tr>
      <td>V</td>
      <td>e</td>
      <td>r</td>
      <td>y</td>
      <td></td>
      <td>w</td>
      <td>i</td>
      <td>d</td>
      <td>e</td>
      <td></td>
      <td>t</td>
      <td>a</td>
      <td>b</td>
      <td>l</td>
      <td>e</td>
   </tr>
</table>

CSS：

div {background-color: red;height:20px;width:100%;}
td {width: 100px;min-width:100px;}

Jsfiddle：http://jsfiddle.net/JXG5c/3/

Answer 1

修复实际上非常简单;将表格和标题包装在inline-block div中。这样，包装div占用了所需的空间，而不仅仅是视口的空间。然后，您可以为孩子div使用100％宽度，这是您的标题。所以，你的新标记应该是这样的：

<div id="parent">
    <div id="child"></div>
    <table>
        <tr><td>V</td><td>e</td><td>r</td><td>y</td><td></td><td>l</td><td>o</td> <td>n</td <td>g</td><td></td><td>t</td><td>a</td><td>b</td><td>l</td><td>e</td></tr>
    </table>
</div>

你的新CSS应该是这样的：

td {width: 100px;min-width:100px;}
#parent {display:inline-block;}
#child {background-color: red;height:20px;width:100%;}

所以真正需要做的就是父必须包装标题和表格，你需要将它设置为inline-block，而Voila，你有一个完整大小的标题。此外，请注意标题将不会“固定”，它将滚动页面，如果我正确解释您的问题，是你想要发生的事情。

这是你的小提琴：http://jsfiddle.net/JXG5c/24/

更新：为什么这适用于inline-block但不适用block？

Block会自动占用父级的所有空间。标题的父级是视口/正文，它自动为屏幕大小的100％。

然而，使用inline-block会使div占用尽可能多的空间。把它想象成<span>元素;它占用了必要的空间，不多也不少。但是，div与inline的效果不佳，因此W3C的用户inline-block会将inline行为授予任何block元素。通过使用内联块，父div自动适合子项的大小，即子表和标题。因此，标题的父级与表的大小相同，并且通过将标题设置为父级的宽度的100％，问题得以解决。：）

Answer 2

你有没有想过只是将标题定位？

<强> JSFiddle

body {
    padding-top: 20px;
}
div {
    background-color: red;
    height:20px;
    width: 100%;
    position: fixed;
    top: 0;
}
td {
    width: 100px;
    min-width:100px;
}

<强>更新如果您想保留标题的垂直滚动，请使用此jQuery代码段：

$(window).scroll(function(){
  $('div').css('top',-$(window).scrollTop());
});

JSFiddle

<强>更新

这是另一个，甚至更简单的方法，但我可以想象上面对你更好，至少如果你不能编辑表的输出。

JSFiddle

Answer 3

试试这个我觉得它应该有效http://jsfiddle.net/JXG5c/15/

 body {padding-top: 20px;}
div {background-color: red;height:20px;width: 100%;position: fixed;top: 0;}
td {width: 100px; min-width:100px;}

100％宽度=视口宽度。如何使它像页面体一样宽？

3 个答案: