Why does tbody have one extra (blank) column on the left?

I have a simple scenario that is baffling me. For some strange reason, my tbody has one extra blank column to the left. I can't find any documentation explaining why this is happening.

If I add a blank <th></th> to the first column, the column placements match for the table, but then I'm left with a blank first column (no data and no header) that I don't want.

One of the first things I checked for was to make sure that my columns were all present and in the correct order. They are.

How do I resolve this issue

HTML

<table class="table" id="Example">
    <thead>
        <tr>
           <th></th>  @*The columns line up now, but I don't want this column.*@
            <th>Campus</th>
            <th>Cohort</th>
            <th>Student Name</th>
            <th>Student ID</th>
            <th>Entry Date</th>
            <th>Exit Date</th>
            <th>Exit Code</th>
            <th>ADE Identity Search Cross-check Date</th>
        </tr>
    </thead>
</table>

jQuery:

var editor;
        $(() => {

            editor = new $.fn.dataTable.Editor({
                ajax: "@Url.Action("EditorTable")",
                table: "#Example",
                fields: [
                    { label: "Campus", name: "Campus" },
                    { label: "Cohort", name: "Cohort" },
                    { label: "StudentName", name: "StudentName" },
                    { label: "StudentId", name: "StudentId" },
                    { label: "EntryDate", name: "EntryDate" },
                    { label: "ExitDate", name: "ExitDate" },
                    { label: "ExitCode", name: "ExitCode" },
                    { label: "AdeIdentitySearchCrossCheckDate", name: "AdeIdentitySearchCrossCheckDate" },
                ]
            });

            var dataTableConfig = {
                //dom: "Blfrti",
                ajax: {
                    url: "@Url.Action("EditorTable")",
                    data: {
                        campus : "@Model.Campus",
                        cohort : "@Model.Cohort"
                    },
                    type: "POST"
                },
                buttons: ['excelHtml5','print'],
                columns:
                [
                    { data: "Campus" },
                    { data: "Cohort" },
                    { data: "StudentName" },
                    { data: "StudentId" },
                    { data: "EntryDate" },
                    { data: "ExitDate" },
                    { data: "ExitCode" },
                    { data: "AdeIdentitySearchCrossCheckDate"}
                ]
            };

            $('#Example').DataTable(dataTableConfig);

            // Activate an inline edit on click of a table cell
            $('#Example').on('click','tbody td:last-child',
                function () {
                    editor.inline(this);
                });
        });

Controller:

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
        public ActionResult EditorTable(string campus, int cohort)
        {
            var settings = Properties.Settings.Default;
            var formData = HttpContext.Request.Form;

            using (var db = new Database(settings.DbType, settings.DbGradRate))
            {
                var response = new Editor(db, "ReconcileCohort", "Id")
                        .Field(new Field("Campus"))
                        .Field(new Field("Cohort"))
                        .Field(new Field("StudentName"))
                        .Field(new Field("StudentId"))
                        .Field(new Field("EntryDate"))
                        .Field(new Field("ExitDate"))
                        .Field(new Field("ExitCode"))
                        .Field(new Field("AdeIdentitySearchCrossCheckDate"))
                        .Where("Campus", campus)
                        .Where("Cohort", cohort)
                    .Process(formData).Data();
                return Json(response, JsonRequestBehavior.AllowGet);
            }
        }