Javascript 在表体上插入值后，将表体与表头对齐

问题：

• 表体内容与每列表头不对齐

代码：

var测试\u insert1=''+
'762261' +
'1.16176' +
'1.1618' +
'2018-08-08' +
'03:32' +
'这是一个测试长度值'+
'1.00' +
“向上”+
'0.80' +
''+
'' +
'456985' +
'1.65476' +
'1984218' +
'2018-08-08' +
'03:32' +
'这是一个测试值'+
'10000' +
“向上”+
'1.00' +
'';
$（'#添加'）。单击（函数（）{
$（'#新的_表格_测试_正文'）.html（测试插入1）；
});
#新的"表格"测试{
宽度：自动；
表布局：固定；
边界塌陷：塌陷；
/*颜色：白色*/
文本对齐：居中；
垂直对齐：中间对齐；
}
#新表格测试主体：：-webkit滚动条{
宽度：0px；
/*删除滚动条空间*/
背景：透明；
/*可选：只需使滚动条不可见*/
}
#新的\u表\u测试车身{
显示：块；
宽度：100%；
溢出：自动；
高度：100px；
}
#新的测试表{
显示：块；
}
#新的测试表{
背景：黑色；
颜色：#fff；
}
#新的测试表，
#新表测试td{
填充物：5px；
文本对齐：左对齐；
宽度：自动；
}

标题1
标题二
头三
H4
标题5
总目6
标题七
标题8
标题九
添加详细信息更改此项：

#new_table_test {
  width: auto;
  table-layout: fixed;
}

为此：

#new_table_test {
  width: 1000px;
  table-layout: auto;
}

您还应该删除
display:block来自
#新表(测试车身
和
#新表)测试车身和tr

有关于
表布局
属性的更多信息



虽然@bahman answer看起来不错，但与此同时，我尝试了一些不同的方法，使用
flex属性。


方法：
在加载数据之前，我已将
设置为可见，但在单击buton时，我隐藏了
，并且只有
在包含标题值的第一行可见，并相应地设置了第一行的样式以匹配标题

方法问题：
需要更多的操作，因为需要添加第一行作为标题，所以更加复杂


var测试\u插入1=
'' +
“标题1”+
“头二”+
“头三”+
‘H4’+
“标题5”+
“标题6”+
“总目45”+
''+'' +
'762261' +
'1.16176' +
'1.1618' +
'2018-08-08' +
'03:32' +
'这是一个测试长度值'+
'0.80' +
''+
'' +
'456985' +
'1.65476' +
'1984218' +
'2018-08-08' +
'03:32' +
'这是一个测试值'+
'1.00' +
'';
$（'#添加'）。单击（函数（）{
$（'#新的_表格_测试_正文'）.html（测试插入1）；
$（“#新建_表_测试_标题”）.hide（）；
});
#新的"表格"测试{
宽度：自动；
表布局：固定；
边界塌陷：塌陷；
/*颜色：白色*/
文本对齐：居中；
垂直对齐：中间对齐；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
#新的表格测试标题，
#新的\u表\u测试\u体{
显示器：flex；
弯曲方向：行；
}
#新表格测试正文>tr：第一个孩子{
背景：黑色；
颜色：白色；
字体大小：粗体；
}
#新表格测试主体：：-webkit滚动条{
宽度：0px；
/*删除滚动条空间*/
背景：透明；
/*可选：只需使滚动条不可见*/
}
#新的\u表\u测试车身{
显示：块；
宽度：100%；
溢出：自动；
}
#新的测试表{
显示：块；
}
#新的测试表{
背景：黑色；
颜色：#fff；
}
#新的测试表，
#新表测试td{
填充物：5px；
文本对齐：左对齐；
}

标题1
标题二
头三
H4
标题5
总目6
总目45
添加详细信息
将以下内容添加到您的表格css（#新建表格测试）：

感谢您的建议，但我正在寻找一种修复方法，它可以根据内容的长度自动调整宽度，使每列的宽度不同，并将内容显示在一行中。我不想让它在一个固定的10%，你的解决方案是辉煌的，但这个解决方案是不能正常工作，对我的期望。我在表体上设置display:block的原因是它可以滚动，而不能完全显示表体的内容。这样地。您可以为此添加其他修复程序吗？您可以将表包装在
div
中，并为此设置
height
和
overflow:auto
。我更新了我的答案，并在我之前的例子中做了。我理解。但是这样做会使标题跟随滚动，并且不是固定的。是否有其他调整？使用这个jquery插件：refere:做了很多修改，可能会有帮助。@AbhishekKumar您可能想发布一个答案并详细说明您的更改，这可能对我和其他人都有用。我会这么做。对不起，我的错。但避免包装的代码是“空白：nowrap”。我想帮助你，但没有包装。：）没有关系
#new_table_test{
    display: inline-block;
    white-space: nowrap; //prevents word wrapping
    ....
}