100％幅のレスポンステーブルの作成方法

Question

私はレスポンシブテーブルを作りたいと思います。私の問題は何か、...

width: 100%; 
display: block; 
overflow-x: auto; 

それが正常に動作しますが、それは、幅が100％にすることはできません。私は...別の要素を使用したくない、だから私はTABLEを与えましたか？

この絵は私の問題を示しています

Answer 1

私はあなたの質問の権利を取得していた場合、これはあなたが何ができるかです：

table td { 
 
min-width: 200px; 
 
} 
 

 
.table-container { 
 
    width: 60%; 
 
    overflow-x: scroll; 
 
}

<div class="table-container"> 
 
    <table> 
 
    <tr> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
     <td>Some data</td> 
 
    </tr>  
 
    </table> 
 
</div>