auto scroolを使って1行のテキストテーブルを作成するdivの幅に水平に合わせる

Question

divの幅に合ったテーブルを作成するのに助けが必要であり、contenitorよりも大きければ自動的に水平のscrool barを追加する。 また、テーブルには各フィールドに1行だけが必要です。

これは現在のコードです：

<div id="RiepilogoDatiSito"> 
    <table> 
     <thead > 
     <tr><td> . . .</td></tr> 
     </thead> 
     <tbody> 
     <tr . . .> 
      <td>. . .</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

そしてCSS

#RiepilogoDatiSito{ 
    clear: both; 
    max-width: 100%; 
    height: 70%; 

    min-height: 200px; 
} 

table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
} 

table { 
    table-layout: fixed; 
    width: 100%; 
    border: 1px solid red; 
    overflow-x: scroll; 
    overflow-y: scroll; 
} 



td { 
    border: 1px solid blue; 
    white-space:nowrap; 
} 

Answer 1

ブラザーはあなたが何をしたいので、あなたが間違った場所に

<div id="RiepilogoDatiSito"> 
<table> 
    <thead > 
    <tr><td> . . .</td></tr> 
    </thead> 
    <tbody> 
    <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
       <tr . . .> 
     <td>. . .</td> 
     </tr> 
    </tbody> 
    </table> 
    </div> 

をスクロールを配置しているだ、このフィドルをチェック

あなたのCSSはこのようになります

ここ

#RiepilogoDatiSito{ 

clear: both; 
width: 100%; 
height: 300px!important; 
overflow-x: scroll; 
overflow-y: scroll; 
    min-height: 200px; 
    display:block; 
    } 

table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
} 

table { 
table-layout: fixed; 
width: 100%; 
border: 1px solid red; 

} 



    td { 
    border: 1px solid blue; 
    white-space:nowrap; 
    } 

はフィドル

https://jsfiddle.net/a5qe4nvj/