Javascript HTML表列未正确显示

我有一个任务来动态显示我已经完成的HTML表格行，我有一个

thead

，

tbody

和

tfoot

，这三个都在不同的表格中，因为我想让

tbody

在一定高度后滚动

表格说明

• 在第一个表中，我只有thead，而在最后一个表中，我只有tfoot，它正在计算一些总数
• 主要的一行是第二行，这一行是动态创建的，当页面加载第一行时，它的输入字段为

  单元格

• 有些输入字段是可编辑的，有些是不可编辑的，因为需要
• 行中的最后一个输入字段是

  Disc%

  ，如果用户按enter键，我将创建新行，每行的第一个单元格是

  ItemName

  ，它是Jquery自动完成的，因此用户键入一些内容并选择一些ItemName，然后按tab键，我将相应地填充一些字段

我想做的事

• 第二个表有

  tbody

  我给了它一些高度，并且

  溢出：auto

  以便它在特定高度后滚动

• 问题是所有的列没有统一对齐，我已经分别为所有列指定了样式

• 当滚动出现时，

  t车身

  也在收缩，即使两者位于相同的

  div

代码

函数格式（数字，小数=2）{
const fixed=parseFloat（数字）.toFixed（小数）；
常量[float，dec]=固定的.split（'.'））
常量INTFORMATED=（+浮点）
返回INTFORMATED+（十二月？“.+十二月：”；
}
$（文档）.ready（函数（）{
var tableData={}；
var表格数据={
“杏仁巧克力~2402”：{
“项目名称”：“杏仁巧克力”，
“项目代码”：“2402”，
“成本价格”：20.0，
“GST百分比”：14.5，
“单位代码”：“编号”，
“mrp”：30.0
},
“一个BR SB EX~333”：{
“项目名称”：“一个BR SB EX”，
“项目代码”：“333”，
“成本价格”：1.0，
“GST百分比”：0.0，
“单位代码”：“编号”，
“mrp”：1.0
}
}
填充数据（tabledata）
函数行追加thead（thead）{
常量标记=
`
项目名称
I代码
物料需求计划
价格
单位数量
光盘%
盘式自动变速器
商品及服务税%
消费税金额
总金额
`
$（thead）.append（theadymarkup）；
}
函数行附加（tbody）{
常量标记=
`
`
$（tbody）.附加（标记）；
setTimeout（（）=>$（“[name=itemNametd]”，tbody.last（）.focus（），100）；
var autoCompleteData=Object.keys（tableData）；
$（“[name=itemNametd]”，tbody.last（）.autocomplete({
资料来源：自动完成数据，
第一：对，
自动对焦：正确
}).数据（“tableData”，tableData）；
}
函数rowappendTfoot（tfoot）{
常数tfootmarkup=
`
总数->
`
$（tfoot）.append（tfootmarkup）；
}
函数getValues（行）{
常量搜索=（$（'[name=itemNametd]'，row.val（））.toString（）
变量数据=$（'[name=itemNametd]'，行）.data（'tableData'）；
常量值=数据[搜索]；
如果（值）{
CostPrice=value.CostPrice；
$（行）.find（“[name=itemCodetd]”）val（value.itemCode）；
$（行）.find（“[name=mrptd]”）.val（格式（value.mrp））；
$（行）.find（“[name=purRatetd]”）.val（格式（CostPrice））；
$（行）.find（“[name=unittd]”）val（value.unitCode）；
$（行）.find（“[name=gstPercentagetd]”）val（value.gstPercentage）；
$（“[name=purRatetd]”）focus（）；
}
}
文件.添加的文件列表器（“键控”，功能（e）{
常量行=event.target.parentElement.parentElement
var keycode=event.keycode | | event.which；
如果（键代码=='13'）{
if（！$（event.target）.val（））{
e、 预防默认值（）；
回来
}
常量行=e.target.parentElement.parentElement
if（event.target.matches（'[name=discPercentagetd]'））{
if（$（行）.parent（）.find（'tr'）.length-$（行）.index（）==1）{
rowappend（event.target.parentElement.parentElement.parentElement）
}
}
}
});
$（文档）.on（“focusout”，“[name=itemNametd]”，函数（e）{
常量行=e.target.parentElement.parentElement
getValues（e.target.parentElement.parentElement）
});
函数填充数据（数据）{
tableData=Object.assign（{}，data）；
var autoCompleteData=Object.keys（数据）；
行附件（$（'thead'，'#tableInvoice'）；
行附加（$（'tbody'，'#tbodyScroll'）；
rowappendTfoot（$（'tfoot'，'#tfootTable'）；
}
});
input[type=tel]{
文本对齐：右对齐；
}
#项目名称{
宽度：370px；
}
#项目名称{
宽度：398px；
}
#itemNametf{
宽度：348px；
}
#项目代码TF，
#itemCodetd，
#mrptf，
#mrptd，
#purRatetf，
#Purrated，
#discAmttf，
#discAmttd，
#gstAmttf，
#gstAmttd，
#gstPercentagetf，
#GSTPercentaged，
#年至今，
#Disc Percentaged，
#单位QTYTF，
#Disc Percentage TF{
字号：10pt；
颜色：黑色；
文本对齐：右对齐；
}
#项目代码{
宽度：60px；
}
#itemCodetf{
宽度：57px；
}
#项目代码{
宽度：63px；
}
#单位时间{
宽度：60px；
}
#单位QTYTF{
宽度：60px；
}
#单位QTYTD{
宽度：60px；
}
#分布百分比{
宽度：60px；
}
#排放百分比{
宽度：60px；
}
#Disc Percentage TF{
宽度：60px；
}
#mrpth{
宽度：60px；
}
#mrptf{
宽度：55px；
}
#mrptd{
宽度：63px；
}
#净化{
宽度：70px；
}
#purRatetf{
宽度：65px；
}
#净化{
宽度：73px；
}
#discAmtth{
宽度：70px；
}
#discAmttf{
宽度：70px；
}
#discAmttd{
宽度：70px；
}
#gstAmtth{
宽度：80px；