javascript - 表格对齐中心不适用于 chrome

Question

我已经创建了一个表并使用动态插件进行过滤。一切正常，但我的问题是，当我使用以下代码时，我的表在 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 中显示左对齐，如下图所示，

这是我的 fiddle :http://jsfiddle.net/Manivasagam/La196r4g/7/

我哪里错了？

Answer 1

您右上角的搜索框的高度大于左侧的“显示:10”框。该表格与此搜索框的左侧对齐。

您可以通过将“显示:10”和“搜索”框都放在一个 div 中来解决这个问题，该 div 的高度足以容纳两者。