表格对齐中心不在chrome中工作

Question

我已经创建了一个表并使用dynatable插件进行过滤。它的工作正常但我的问题是，当我使用下面的代码时，我的表在firefox中对齐中心，

CSS：

table{max-width:100%;background-color:transparent;border-collapse:collapse;border-spacing:0;}
.table{width:80%;margin-bottom:20px;}.table th,.table td{padding:8px;line-height:20px;text-align:left;vertical-align:top;border-top:1px solid #dddddd;}
.table th{font-weight:bold;}
.table-hover tbody tr:hover>td{background-color:#176940; color:white;}

jsp：

 <table id="my-table"  style="margin:auto;  border: thick solid black; text-align: left" border="1" >

      <thead>
        <tr>
          <th>Name</th>
          <th>Hobby</th>
          <th>Favorite Music</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Fred</td>
          <td>Roller Skating</td>
          <td>Disco</td>
        </tr>
        <tr>
          <td>Helen</td>
          <td>Rock Climbing</td>
          <td>Alternative</td>
        </tr>
        <tr>
          <td>Glen</td>
          <td>Traveling</td>
          <td>Classical</td>
        </tr>
      </tbody>
    </table>

表格如下图所示，

但是在chrome显示左侧对齐，如下图所示，

这是我的小提琴：http://jsfiddle.net/Manivasagam/La196r4g/7/

我哪里错了？

Answer 1

您的搜索框右上方的高度大于＆＃34;显示：10＆＃34;左边的方框。该表格与此搜索框的左侧对齐。

你可以通过同时放置＆＃34;显示：10＆＃34;来解决它。和＆＃34;搜索＆＃34; div中的框，其高度足以容纳两者。