[6.x]: Adding `class: 'code'` to an editableTableField messes up the header row

[BenParizek]

What happened?

Description

Adding class: 'code' to an editableTableField causes the header row to adjust and not match up with the cells below it.

Depending on what columns you add the code class to, the output may differ but is usually messed up in some way.

Steps to reproduce

Add an editable table to a custom CP page in C6:

{{ forms.editableTableField({
    label: "Editable Table",
    name: 'editableTable',
    cols: {
        label: {
            type: 'singleline',
            heading: "Label",
            class: 'code',
        },
        metadatumFormat: {
            type: 'singleline',
            heading: "Description",
            class: 'code',
        },
    }|filter,
    rows: [],
    fullWidth: true,
    allowAdd: true,
    allowReorder: true,
    allowDelete: true,
    minRows: 1,
}) }}

Expected behavior

Headers line up with columns.

Actual behavior

Headers don't line up with columns!

Craft CMS version

Craft 6 Alpha 3

PHP version

8.5

Operating system and version

macos

Database type and version

mysql

Image driver and version

No response

Installed plugins and versions

[linear-code]

CMS-2099