Can't align table with overflow

Question

Hi, I'm new to html and I'm working on designing my website. I made a table that WAS center aligned until I put a scroll bar on it. Now I can't get the table to center align unless I take out the scroll bar. I'll show you what I have so far:

(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)

I tried several different approaches and still no luck. It seems like it shouldn't be this hard, so I figure I'm overlooking some small but important detail. Any help would greatly be appreciated.

Answer 1

Move the "margin-left: auto; margin-right: auto" styles to the div instead of the table. Also, your div and table are the same size, so there won't be a scrollbar.

<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