如何制作宽度为100％的响应式表格？

Question

我想制作一个响应表。我不希望使用另一个元素......，所以我给表：

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

它正常工作，但它不能在宽度100％......，什么是我的问题吗？

这张照片显示我的问题：

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>