Question

有没有办法在表格中放置一列，以便它不会沿着x轴滚动，而是沿着y滚动？也许某种方式使用绝对定位只影响一个（如电子表格。标题保持在顶部，如绝对定位）？

注意：我想避免使用Javascript

编辑：我需要让表格的溢出滚动

好的，我发现了一个按照我想要的方式运行的示例：http://cross-browser.com/x/examples/xtable.php，或者这个：http://www.disconova.com/open_source/files/freezepanes.htm但是我无法弄清楚他们做了什么让它发挥作用。

我最终还是使用了Javascript。

对于固定列，我发现了一个名为DataTables的优秀Javascript工具包，它有一个名为FixedColumns的插件，允许使用固定列。 Link

Answer 1

我很确定你使用

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

Answer 2

如果你想用表格做，你必须做这样的事情

<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>

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

你可以通过在数据表左侧放置一个表并确保将列标题表appropriatley偏移到右边来为行标题做类似的事情。

我不会写出所有的CSS，但我相信你可以解决这个问题。

Answer 3

您可以将表格包装在具有固定宽度的容器中，并设置它的溢出属性。

<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;
}

您的表显然需要以宽度方式显示数据。除非您指定容器的高度，否则添加更多行不会导致它滚动。

DEMO

CSS样式以防止沿y轴滚动

3 个答案: