27

htmlとcssだけを使用してテーブルの本体をスクロール可能にするバニラの方法を知っている人はいますか？

明らかな解決策

tbody {
    height: 200px;
    overflow-y: scroll;
}

動作しません。

これはテーブルの明らかな使用法ではないでしょうか？

私は何か間違ったことをしていますか？

4

4 に答える 4

48

最初に高さを宣言する必要があります。そうしないと、テーブルはその内容に応じて拡張されます。

table{
   overflow-y:scroll;
   height:100px;
   display:block;
}

編集：あなたの問題を明確にした後、私はフィドルを編集しました：この例またはその方法をチェックしてください。それはかなりハッキーであり、クロスブラウザで動作するように隔離されていませんが、あなたのケースでは動作する可能性があります。

于 2012-09-26T08:51:05.487 に答える
13

あなたはテーブルでそれをすることはできません。テーブルをdivでラップし、次のようにします。

div.wrapper {
    overflow:hidden;
    overflow-y: scroll;
    height: 100px; // change this to desired height
}
于 2012-09-26T08:51:21.557 に答える
9

scoota269のアドバイスに従って、テーブルを親でラップし、divスクロール可能にすることができます。

.div_before_table {
    overflow:hidden;
    overflow-y: scroll;
    height: 500px;
}

また、テーブルヘッダーfixedを固定するために、クラスを追加できます。

.th.fixed {
    top: 0;
    z-index: 2;
    position: sticky;
    background-color: white;
 }


table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #ddd;
}


/* The scrollable part */

.scrollable {
  height: 150px;
  overflow-y: scroll;
  border-bottom: 1px solid #ddd;
}

th {
  position: sticky;
  background-color: white;
  z-index: 2;
  top: 0;
}
<div class="scrollable">
  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>
</div>

于 2020-04-28T12:17:07.403 に答える
1

このようなものが欲しいですか？

固定ヘッダー付きの純粋なCSSスクロール可能テーブル（1）

http://anaturb.net/csstips/sheader.htm

http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html

于 2012-09-26T09:56:04.227 に答える