CSS Shrink label & td cell to accommodate text - html

Question

I have a checkbox list that I need to make horizontal. The checkboxes and labels are all appearing on the same row but the spacing between them is very far apart, is there a way to shrink each cell to be only as large as the checkbox and label inside of it? JSFiddle here: 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;
}
I've inherited this code and trying to shrink the table cells to only be as large as the text inside of them. Any help greatly appreciated.