4

x 軸に沿ってスクロールせず、y 軸に沿ってスクロールするようにテーブルに列を配置する方法はありますか? おそらく、1つだけに影響する絶対配置を使用する方法（スプレッドシートのように。絶対配置のように、ヘッダーは上部にとどまります）？

注: Javascript の使用を避けたい

編集：スクロールするように設定されたテーブルのオーバーフローが必要です

OK、希望どおりに動作する例を見つけました: http://cross-browser.com/x/examples/xtable.php、またはこれ: http://www.disconova.com/open_source/files/freezepanes. htmしかし、それを機能させるために彼らが何をしているのかわかりません。

とにかくJavascriptを使用することになりました。

固定列については、DataTables という優れた Javascript ツールキットを見つけました。これには、固定列を可能にする 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>

次に、スタイルを適切に設定する必要があります。ヘッダーの各セルの幅が、2 番目のテーブルの各列に設定した幅と同じであることを確認してください。これにより、ヘッダーとデータ テーブルが整列します。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 に答える