Impossible d'aligner le tableau avec débordement

Question

Je suis nouveau en HTML et je travaille à la conception de mon site Web. J'ai fait une table qui était alignée au centre jusqu'à ce que je mette une barre de défilement dessus. Maintenant, je ne peux pas aligner la table à moins d'enlever la barre de défilement. Je vais vous montrer ce que j'ai jusqu'à présent:

<div style="overflow: auto; height: 86px; width: 750px;"> 
<table 
style="height: 86px; margin-left: auto; margin-right: auto; width: 750px; text-align: left;" 
border-style:="" hidden;="" cellpadding="2" cellspacing="2"> 
    <tbody> 

    TABLE CONTENT with multiple rows and two columns. 
    </tbody> 
</table> 
</div> 

J'ai essayé plusieurs approches différentes et toujours pas de chance. Il semble que ça ne devrait pas être si difficile, alors je me dis que je néglige certains détails, petits mais importants. Toute aide serait grandement appréciée.

Answer 1

Déplacez les styles "margin-left: auto, margin-right: auto" vers la div au lieu de la table. De plus, votre div et votre table ont la même taille, donc il n'y aura pas de barre de défilement.

<div style="overflow: auto; height: 86px; width: 500px;margin-left: auto; margin-right: auto; "> 
    <table style="height: 86px; width: 750px; text-align: left;" border-style:="" hidden;="" cellpadding="2" cellspacing="2"> 
     <tbody> 
      <tr> 
       <td>1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </td> 
       <td>2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 </td> 
      </tr> 
      <tr> 
       <td>3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 </td> 
       <td>4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 </td> 
      </tr> 
     </tbody> 
    </table> 
</div