So I had to do this a different way than what i posted on this thread since LFForm object can't modify css. I needed to keep my labels and then update them with javaScript (changeFieldSettings). That works great. I have a lookup table populate with values and then pass those values to the 45 degree angle labels on the table. 

New challenge: The only way I could get the labels to line up was by using css "position: absolute;", that basically ruins it for any mobile usage. My current plan is to just tell users to switch their mobile browser to 'desktop mode', but has anyone else figured this out?
 

here is my current CSS & javaScript in case anyone can take the ball & run with it.

/* Rotates and repositions header cells in columns 4 & 5 of table #q353.
   WARNING: Absolute positioning assumes fixed column widths.
   Adjust `left` values if table layout changes. */

.workMonthHours .fl-table.fl-component th {
	border: none !important;
}
/* Keep overflow open so rotated text can spill out */
#q353,
#q353 .fl-table.fl-component,
#q353 thead,
#q353 thead tr {
  overflow: visible !important;
}

/* Keep <thead> or <tr> relative to anchor absolute children */
#q353 thead {
  position: relative !important;
}
/* COLUMN 4: relatively positioned for gentle shifting */
#q353 thead th.table-header-cell:nth-child(4) {
  position: absolute !important;
  width: 242px !important;
  transform: rotate(315deg);
  transform-origin: bottom left;

  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;

  padding-left: 30px;
  bottom: -19px;
  left: 293px;

  line-height: 1;
  vertical-align: bottom;
  text-align: left;
  z-index: 10;
}

/* COLUMN 5: absolutely positioned for overlap/freedom */
#q353 thead th.table-header-cell:nth-child(5) {
  position: absolute !important;
  width: 242px !important;
  transform: rotate(315deg);
  transform-origin: bottom left;

  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;

  padding-left: 30px;
  bottom: -19px;
  left: 376px;

  line-height: 1;
  vertical-align: bottom;
  text-align: left;
  z-index: 10;
}

/*=====================rotate Labels=====*/
LFForm.onLookupDone(async function () {
  await new Promise(resolve => setTimeout(resolve, 100));

  const jcDescrValues = LFForm.getFieldValues({ fieldId: 426 });

  const label1 = jcDescrValues[0]?.trim() || 'Job Code 1';
  const label2 = jcDescrValues[1]?.trim() || 'Job Code 2';

  const hours1Exists = LFForm.getFieldValues({ fieldId: 363 }).length > 0;
  const hours2Exists = LFForm.getFieldValues({ fieldId: 364 }).length > 0;

  if (hours1Exists) {
    LFForm.changeFieldSettings({ fieldId: 363 }, { label: label1 });
  } else {
    console.warn('Field hours_1 (ID 363) not found — is the row missing?');
  }

  if (hours2Exists) {
    LFForm.changeFieldSettings({ fieldId: 364 }, { label: label2 });
  } else {
    console.warn('Field hours_2 (ID 364) not found — is the row missing?');
  }
}, { lookupRuleId: 16 });