4

tdテーブルがあり、その内容が行の指定された高さを超えたときに垂直スクロールバーを表示したいと思います。

このサンプルコードがありますが、コンテンツに関係なく、y軸にアクティブなスクロールバーが表示されません。

4

3 に答える 3

12

ブラウザはオーバーフロースクロールバーをTDタグに適用しません。テーブルセルの内容をdivタグで囲み、次のようにスクロールする必要があります。

<td><div>Do you see what I meancxzdaaaaaaaaaaaaa?</div></td>

と：

td > div { overflow-y:scroll;overflow-x:hidden;}
于 2012-12-27T17:20:10.877 に答える
5

Overflow:scroll;ブロックレベルの要素にスクロールバーを表示する必要がありますが、そうでtdはありません。それは何をすべきtdですか？CSSの仕様はこれについて明確ではないため、ブラウザの動作は異なります。

Chromeはスクロールバーを適用しますが、FFとIEは適用しません。クロスブラウザソリューションの場合は、コンテナdivを追加して、代わりにCSSを適用できます。

<html>
  <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
      table { width:250px;table-layout:fixed;border-collapse:collapse }
      table tr { height:1em;  }
      td > div { overflow-y:scroll;overflow-x:hidden;} 
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>This is a test.</td>
        <td><div>Do you see what I meancxzdaaaaaaaaaaaaa?</div></td>
        <td>I hate this overflow.</td>
      </tr>
    </table>
  </body>
</html>
于 2012-12-27T17:20:23.917 に答える
3 
td > div { overflow-y:auto;}

これにより、必要に応じて垂直スクロールバーが追加されます。

于 2015-10-26T08:52:28.043 に答える