Ali Bahaari Ali Bahaari - 4 months ago 8
CSS Question

How to make a Responsive Table with 100% width?

I want to make a Responsive Table. I don't want to use Another Element ..., So I gave the TABLE :

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


It works correctly but It can't be 100% in width ..., What is my problem ?

This picture shows my problem :
Problem

Answer

If i'm getting your question right, this is what you can do:

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>