如何製作寬度爲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>