1

テーブルが親をオーバーフローしたときにスクロールを達成しようとしています:

<div class="main_container">
<form id="list_wrapper">
<table>
    <tbody>
           <tr><td>HELLO</td></tr>
           <tr><td>HELLO</td></tr>
           <tr><td>HELLO</td></tr>
           <tr><td>HELLO</td></tr>
           <tr><td>HELLO</td></tr>
           <tr><td>HELLO</td></tr>
           <tr><td>HELLO</td></tr>
           <tr><td>HELLO</td></tr>
     </tbody>
   </table>
 </form>
</div>

//JQuery that will dynamically resize rows depending on how many rows there are.
<script type="text/javascript>
setTimeout(function(){
    var totalRowHeight = $("tr").height() * $("tr").length;    
    $("form#list_wrapper").css("height", "" + totalRowHeight + "");
},1);​
</script>

デモンストレーションについては、 JSFiddleを参照してください。

興味深いことに、私の Droid X ブラウザー (バージョン: 2.3.4) でこのリンクを開くと、テーブルはまだオーバーフローしますが、スクロールしません。デスクトップ ブラウザー経由でリンクを開いたときに見られる動作を Android で再現したいと考えています。

: このリンクは、Safari や Chrome などの IOS ブラウザーでテストしましたが、うまく機能します。

4

0 に答える 0