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 的插件，允许固定列。链接。

4

3 回答 3

2

我很确定你用

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

于 2012-07-26T18:52:31.187 回答
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，因为我相信你可以弄清楚这一点。

于 2012-07-26T19:12:08.600 回答
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;
}

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

演示

于 2012-07-26T18:56:43.543 回答