追加後にテーブルが減少表示：ブロック

Question

周囲のdiv全体をとったテーブルがありました。それを反応させるために、私は水平スクロールバーを追加したかったのです。私は属性を追加しました

display: block; 
overflow-x: auto; 

テーブルには、テーブルのサイズを減らしました。私はそれがディスプレイであることを理解しました。それをした属性。私は幅を追加しようとしました：100％が動作しませんでした。誰かがこれを修正する方法のアイデアを持っていますか？

表示ブロック属性付加前の画像： https://ibb.co/kLCETv

以降： https://ibb.co/dptXFa

あなたの時間をありがとう！

Answer 1

divで表を折り返して、表の代わりにそのdivにスタイルを付けてください。 divにテーブル

<div class="table-wrapper"> 
    <table></table> 
</div> 

Answer 2

はラップあなたに、

div { 
 
    overflow: auto; 
 
}

<div> 
 
    <table border=1 cellspacing=0 cellpadding=6> 
 
    <tr> 
 
     <th>Placeholder</th> 
 
     <th>Placeholder</th> 
 
     <th>Placeholder</th> 
 
     <th>Placeholder</th> 
 
     <th>Placeholder</th> 
 
     <th>Placeholder</th> 
 
     <th>Placeholder</th> 
 
     <th>Placeholder</th> 
 
     <th>Placeholder</th> 
 
     <th>Placeholder</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
    </tr> 
 
    </table> 
 
</div>