Как правильно центрировать таблицу в контейнере div?

Question

Я не так в HTML и CSS, и у меня есть некоторая проблема, чтобы положить таблицу в центр ее контейнера. Так что у меня следующая ситуация:

<!-- SEDE LEGALE: --> 
<div id="sedeLegaleTab"> 
    <table class="standard-table-cls table-header-cls"> 
     <thead class="opening active"> 
      <tr> 
       <th> 
        <img class="imgAccordion" src="img/arrow_down.gif"/> 
        Sede Legale 
       </th> 
      </tr> 
     </thead> 

     <tbody class="expanded" > 
      <tr> 
       <td> 
        <div id="sedeLegaleContent" class="accordion-pane-content"> 
         <table class="standard-table-cls" style="width: 90%;"> 
          <tbody> 
           <tr> 
            <td>Ragione Sociale</td> 
            <td colspan=5> 
             <input type="TEXT" name="ragsoc" size=60 maxlength=100 <%=master?"":"readonly"%> 
               class="testosmallUpper" value="<%= ragioneSociale %>" onblur="MakeItUpper(event,this)"> 
            </td> 
           </tr> 

           .............................................. 
           .............................................. 
           .............................................. 
           OTHER TR 
           .............................................. 
           .............................................. 
           .............................................. 
          </tbody> 
         </table> 
        </div> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Я знаю, что это довольно orrible макет старого стола, но это очень старое унаследованное приложение, и я должен работать над этим.

Так что это скриншот того, что он оказывает содержание этой таблицы (то есть в предыдущем коде):

<table class="standard-table-cls" style="width: 90%;"> 

Теперь, как вы можете видеть, в этой таблице находится в div, имеющем id = "sedeLegaleContent" и он установил style = "width: 90%;"

Так что мне нужно, чтобы отцентрировать его внутри контейнера (ДИВ, имеющий ID = «sedeLegaleContent»)

Что я могу попытаться сделать это?

я могу сделать это, добавив к этому Div в ALIGN = «центр» атрибут, таким способом:

<div id="sedeLegaleContent" class="accordion-pane-content" align="center"> 

Но я могу сделать это в какой-то лучший способ с помощью CSS? Или это хорошее решение?

Answer 1

Попробуйте использовать так: Demo

CSS:

table{ 
    border:1px solid #ddd; 
    margin:0 auto; 
}