防止沿y轴滚动的CSS样式

Question

防止沿y轴滚动的CSS样式

4

有没有一种方法可以定位表格中的列，使其不沿着x轴滚动，而沿y轴滚动？或许有一些使用绝对定位的方法，只会影响一个（像电子表格一样。标题保持在顶部，就像绝对定位一样）？

注意：我想避免使用Javascript。

编辑：我需要将表格的溢出设置为滚动。

好的，我找到了一个符合我要求的示例：http://cross-browser.com/x/examples/xtable.php 或这个：http://www.disconova.com/open_source/files/freezepanes.htm 但我无法弄清楚它们是如何运作的。

最终我还是使用了Javascript。

对于固定列，我找到了一个很棒的Javascript工具包叫做DataTables，它有一个名为FixedColumns的插件，允许固定列。链接。

- CharlesL

我不确定我完全理解你的意思，但是你不能有一个没有溢出的容器吗？ - Jon Taylor

我需要一个带有溢出容器，第一列不随着其余内容滚动的容器。就像Excel电子表格一样。 - CharlesL

但是没有办法只固定表格中的一列并滚动其他列，您需要使用单独的表格或div。使用单个表格无法实现此目的。 - Jon Taylor

关于你的编辑，他们使用单独的div和表格来产生我之前所述的效果。如果你右键点击并检查元素，你可以看到他们使用的结构。 - Jon Taylor

这个怎么样：http://www.disconova.com/open_source/files/freezepanes.htm。我认为这个没有使用单独的表格。 - CharlesL

是的，如果你仔细看代码，它确实使用了几个表格，一个用于左侧行标题，一个用于列标题，还有一个用于数据。尽管看他们的代码有点困惑，但我必须承认，这主要是由于其中包含的大量数据。他们基本上做的就是我在我的答案中所做的。 - Jon Taylor

3个回答

1

如果您想使用表格来完成此操作，您需要执行以下步骤。

<table>
    <tr><td>col1 name</td><td>col2 name</td></tr>
</table>
<div>
    <table>
        <tr><td>col1 row1 data</td><td>col2 row1 data</td></tr>
        <tr><td>col1 row2 data</td><td>col2 row2 data</td></tr>
        <tr><td>col1 row3 data</td><td>col2 row3 data</td></tr>
    </table>
</div>

然后您需要适当设置样式，确保标题中每个单元格的宽度与第二个表格中每列设置的宽度相同，这将使您的标题和数据表格对齐。使div可滚动，以便表格的数据部分滚动，而标题部分保持静态。

您还可以通过在数据表格左侧放置一个表格并确保适当向右偏移列标题表来为行标题做类似的事情。

我不会写出所有的CSS，因为我相信您可以自己解决这个问题。

- Jon Taylor

0

您可以将表格放在一个固定宽度的容器中，并设置其溢出属性。

<div id="foo">
    <table>
      <tr>
        <td>a</td><td>b</td><td>c</td><td>d</td>
      </tr>
      <tr>
        <td>a</td><td>b</td><td>c</td><td>d</td>
      </tr>
      <tr>
        <td>a</td><td>b</td><td>c</td><td>d</td>
      </tr>
    </table>
</div>

CSS

#foo {
  width: 100px;
  overflow: auto;
}

显然，你的表格需要横向显示数据。除非你也指定容器的高度，否则添加更多行不会导致它滚动。

演示

- sachleen

我相信他只是想要一个单行或单列滚动。 - Jon Taylor

@JonTaylor 是的，我看到了这个编辑。不能只用一个表格元素来完成它。必须将第一列与其余部分分开。 - sachleen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dayan · Accepted Answer

我相信你经常使用

overflow-y: hidden;

例如，看看这个网站。

在下面的例子中，我们可以创建一个表格嵌套在另一个表格内部，虽然不是最干净的方法，但应该可以工作。 http://www.brunildo.org/test/Overflowxy2.html

<TABLE BORDER="2" CELLPADDING="5" CELLSPACING="5">
<TD>
<div style="width:325px; height:48px; overflow-y:scroll;">
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="3">
           <TD>inside the first one<br />
           we can add text and enable<br />
           overflow-y for vertical<br />
           scrolling.</TD>
</TABLE>
</div>
</TD>
<TD> This is a different table. You can edit this to fit your needs.</TD>
</TABLE>

注意：请前往w3schools进行实时尝试，这样您可以测试并学习它；）- http://www.w3schools.com/cssref/css3_pr_overflow-y.asp