Comment ajouter une barre de défilement horizontale à une table avec une largeur non fixée?

Question

Je souhaite ajouter une barre de défilement horizontale à une table. Cependant, l'utilisateur peut ajouter une ligne à la table, sa largeur doit donc changer. Une ligne a une largeur de 100px donc avec 10 lignes, ma table a une largeur de 1000px mais la div qui contient la table n'a que 800px de largeur. Je veux si la largeur de la table est plus grande que la largeur de la div une barre de défilement horizontale dans la table.

<div style="width:800px;overflow:auto;"> 
    <table>...</table> 
</div> 

Avez-vous une idée comment faire?

Answer 1

Vous pouvez simplement faire cela en ajoutant overflow-x:scroll et il y aura toujours une barre de défilement sur l'axe des x.

Answer 2

essayer ce code

div { 
 
    overflow-x: auto; 
 
    width: 800px; 
 
}

<div> 
 
    <table border="1"> 
 
    <tr> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
     <td>test</td> 
 
    </tr> 
 

 
    </table> 
 
</div>

Answer 3

Ajouter overflow: auto; à votre div et donner votre table une largeur fixe + overflow-x: scroll;.

Jetez un oeil:

div { 
 
    overflow: auto; 
 
} 
 

 
table { 
 
    overflow-x: scroll; 
 
    width: 800px; 
 
} 
 

 
th, td { 
 
    width: 100px; 
 
}

<div> 
 
    <table> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     <th>4</th> 
 
     <th>5</th> 
 
     <th>6</th> 
 
     <th>7</th> 
 
     <th>8</th> 
 
     <th>9</th> 
 
     <th>10</th> 
 
    </table> 
 
</div>