html - 表のパディングが Chrome で機能しない

Question

私は過去数日間、このテーブルに苦労してきましたが、最終的には、テキストの配置がクロムで正しく機能していないことを発見するだけでした。IEとFirefoxで希望どおりに表示されます（中央に垂直に配置され、左にパディングされています）しかし、クロムでは表示されません。どんな助けでも素晴らしいでしょう、私は最後にいます。

これら 2 つを jfiddle ( http://jsfiddle.net/kaRev/ ) で開きます。次の画像は、2 つのブラウザー (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;