Html 表格填充在chrome中不起作用

在过去的几天里，我一直在努力处理这个表格，最终得到了我想要的结果，却发现chrome中的文本对齐方式不正确。它准确地显示了我希望它在ie和firefox中垂直对齐到中间并填充到左侧的方式，但在chrome中它没有显示出来。任何帮助都会令人惊讶，我已经穷途末路了

用小提琴打开这两个。下一幅图说明了我在两个浏览器chrome和ff之间遇到的问题。右边的Firefox可以正确安装，而左边的chrome则不能

这是一个chrome的屏幕截图，表中的文本太左了

这是我想要的firefox：

HTML:

---

摆脱这个显示：内联表

不幸的是，这打破了表格标题的背景。有没有办法解决这个问题？花车什么的？或者另一个表格标题背景的工作。我没有看到你看到的。它看起来与firefox中没有内联表的情况一模一样。表头和列。奇怪的是，对我来说，thead bg开始在主机上重复，以防有人想使用display:inline块；代替显示：内联块；调整了一点间距后，效果非常好。您可能想重新阅读上一条评论。我不知道它应该说什么。

<table class="tableBenefits">
<thead>
<tr>
          <th style="height:34px;width: 207px;font-weight:bold;color:#D2161C;" class="headneed">
      &nbsp Your Need        </th>
          <th style="height:34px;width: 166px;font-weight:bold;color:#D2161C;" class="headfeature">
      Feature        </th>
          <th style="height:34px;width: 260px;font-weight:bold;color:#D2161C;" class="headbenefits">
      Benefits   </th>

      </tr>
</thead>

<tbody >
      <tr class="row-mid">
              <td class="need">
        Notify technicians &amp; managers of work order status updates          </td>
              <td class="feature">
        Automated work order email notifications          </td>
              <td class="benefits">
        Keeps team updated on work order status; reduces admin time on work orders          </td>



          </tr>

  <tr class="row-mid">
              <td class="need">
        Notify service/repair requesters of progress          </td>
              <td class="feature">
        Automated service request email notifications          </td>
              <td class="benefits">
        Keeps requesters updated on progress; reduces personnel time for providing updates          </td>
          </tr>

  <tr class="row-mid">
              <td class="need">
        Manage &amp; track work orders          </td>
              <td class="feature">
        Work Order Forms, Linking, &amp; Routing          </td>
              <td class="benefits">
        Simplifies work order administration &amp; reduces data entry time          </td>
          </tr>

  <tr class="row-mid">
              <td class="need">
        Manage service &amp; repair requests          </td>
              <td class="feature">
        Web-based Service Request Form          </td>
              <td class="benefits">
        Simplifies request submission and routing          </td>
          </tr>
  </tbody>

.tableBenefits thead {
background: url(http://www.mpulsesoftware.com/sites/all/themes/zen/image/top_eq.jpg) no-repeat;
}

.tableBenefits {
border-collapse: collapse;
border-spacing: 0;
}

.tableBeneits thead th {
font-weight:bold;color:#D2161C;
}

.tableBenefits {height:300px;width:640px;}

.headneed{font-weight:bold;font-size:11px;}
.headfeature{font-size:11px;}
.headbenefits{font-size:11px;}
.need{font-weight:bold;font-size:11px;text-align: left;padding-left: 10px;}
.feature{font-size:11px;text-align: left;padding-left: 10px;}
.benefits{font-size:11px;text-align: left;padding-left: 10px;}
.row-mid{background: url("http://www.mpulsesoftware.com/sites/all/themes/zen/image/middle_eq.jpg")repeat-y;width:640px;border-bottom:1px solid #ccc;}

.row-last{background: url("http://www.mpulsesoftware.com/sites/all/themes/zen/image/bottom_eq.jpg")repeat-y;width:640px;}



/* Webtk hack*/

@media screen and (-webkit-min-device-pixel-ratio:0) {




.tableBenefits td, .tableBenefits th {
  display: inline-table;

}

.headneed, .need{
  width: 207px;


}
.headfeature, .feature{
  width: 166px;

 }

.headbenefits, .benefits{
  width: 260px;

 }

}

/* End benefits table */