テーブルがHTMLで表示されないようにしたい

Question

スクロール可能なテーブルを作成しようとしています。

ただし、と表示されています。

スクロールでとしたいと思いました。

私が試した：

<style> 
table.scroll tbody, 
table.scroll thead { display: block; } 



table.scroll tbody { 
    height: 300px; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 

</style> 
<script> 
// Change the selector if needed 
var $table = $('table.scroll'), 
    $bodyCells = $table.find('tbody tr:first').children(), 
    colWidth; 

// Adjust the width of thead cells when window resizes 
$(window).resize(function() { 
    // Get the tbody columns width array 
    colWidth = $bodyCells.map(function() { 
     return $(this).width(); 
    }).get(); 

    // Set the width of thead columns 
    $table.find('thead tr').children().each(function(i, v) { 
     $(v).width(colWidth[i]); 
    });  
}).resize(); // Trigger resize handler 
</script> 

私はあなたがすべてを正しく合わせることでtbody

Answer 1

を効果をスクロールしているテーブルは、あなたがやった理由であるメインテーブル に幅を与えるのを忘れたいです必要な出力が これはテーブルに完全な幅aを与える

table.scroll,table{width:100%;} 

を試してみてください取得ND、必要な出力

Answer 2

は

働くかもしれ

table 
{ 
    display: block; 
    overflow-x: auto; 
    white-space: nowrap; 
} 

以下のようにCSSを入れてやってみてしまいます。