CSS Shrink标签＆amp; td单元格以容纳文本

Question

我有一个我需要横向的复选框列表。复选框和标签都出现在同一行，但它们之间的间距相距很远，是否有办法将每个单元格缩小到仅与其内部的复选框和标签一样大？ JSFiddle：http://jsfiddle.net/yrcZ2/

<table id="form_3D7" class="scfCheckBoxList">
  <tbody>
    <tr>
      <td>
        <input id="form_3D7" type="checkbox" value="One" name="form_3D7">
        <label for="form_3D7">One</label>
      </td>
      <td>
        <input id="form_3D8" type="checkbox" value="Two" name="form_3D8">
        <label for="form_387">Two</label>
      </td>
      <td>
        <input id="form_3D9" type="checkbox" value="Three" name="form_3D9">
        <label for="form_3D9">Three</label>
      </td>
    </tr>
  </tbody>
</table>

CSS：

.scfCheckBoxList {
   margin: 0;
   width: 100%;
}

tbody {
   display: table-row-group;
   vertical-align: middle;
}

tr {
   display: table-row;
   vertical-align: inherit;
}

.scfCheckBoxList td {
   vertical-align: top;
}

.scfCheckBoxList input {
   float: left;
   width: 30px;
}

.scfCheckBoxList label {
   clear: none;
   font-weight: normal;
   padding: 0;
   width: 68%;
}

.scfForm input {
box-sizing: border-box;
}

我继承了这段代码并尝试将表格单元缩小到与它们内部的文本一样大。非常感谢任何帮助。