Checks not showing in the correct location

Question

I have a partial view with a table below. I am trying to display checkbox in the first column, but none are displaying correctly.

<h4>Select Skills...</h4>
@using (Ajax.BeginForm("ManagePartial", new AjaxOptions { UpdateTargetId = "PartialDiv", HttpMethod = "Get", OnComplete = "preventpartialUpdate" }))
{
    <p>
        Find by name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
        <input type="submit" name="command" value="Search..."/>
    </p>
}
<table class="table">
    <tr>
        <th>Checked</th>
        <th>Heading</th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>

                @Html.CheckBoxFor(x => item.CheckedStatus)
                @Html.HiddenFor(x => item.CheckedStatus)
            </td>
            <td>
                @Html.HiddenFor(x => item.Skill)
                @Html.DisplayFor(x => item.Skill)</td>
        </tr>
    }
</table>

The checkboxs are showing up chrome developer tools, but the screen is showing (either one checkbox or all stacked in one location(top left corner). Image attached.

Any Ideas would be appreciated thanks.