表填充不在chrome中工作

Question

过去几天我一直在努力争取这张桌子，最后得到它我只想发现文本对齐在chrome中无法正常工作。它显示了我想要的方式ie和firefox（垂直对齐中间和填充左侧）但是它不会通过chrome来实现。任何帮助都会令人惊叹，我的结果就是最终的。

在jfiddle（http://jsfiddle.net/kaRev/）中打开这两个。下一张图片说明了我在两个浏览器（chrome和ff）之间遇到的问题。右边的Firefox正确填充它，而左边的chrome不是

以下是chrome的屏幕截图，其中表格中的文字太远了。

这是firefox，这就是我想要的：

HTML：

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

CSS：

.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 */

Answer 1

摆脱这个display: inline-table;