表格单元格内的HTML输入

我有一个包含许多列的表，我想在标题单元格中添加

input

字段，但我想根据正文内容使输入适合宽度

这就是没有

输入

字段时的情况：

这就是

输入

字段的情况：

可以看出，像“index”和“Is Active”这样的列占用了太多的空间，我希望尽量保持第一个布局。我尝试将输入宽度设置为100%和自动，但似乎没有多大帮助

当前css看起来像：

.table{
字体系列：Arial、Helvetica、无衬线字体；
}
.餐桌{
位置：粘性；
排名：0；
}
.表thead th{
边框：1px实心#e4eff8；
背景：白色；
光标：指针；
}
.表THAD th.标题标签{
光标：指针；
背景：线性梯度（0度，#e4eff8，#4578a2 5%，#e4eff8 150%）；
颜色：白色；
边框：1px纯白；
}
.表th，
.表td{
填充：0.2rem 0.5rem；
文本对齐：居中；
}
.表td{
边框：1px实心#e4eff8；
}
.表格输入{
宽度：100%；
}

指数
名称
电话
单位
登记
是活跃的
0
白豆
+1 (871) 458-2959
摩加尼奇
2018-12-27T11:28:50-01:00
假的
1.
诺克斯霍尔曼
+1 (880) 497-2808
内地
2017-05-07T02:54:22-01:00
假的
2.
白兰地结肠
+1 (969) 513-2827
下基因
2017-06-07T06:42:31-00:00
真的
3.
苏塞特·奥斯汀
+1 (863) 445-3604
喷气式飞机
2015-10-24T11:10:41-01:00
真的
4.
唐斯凯恩酒店
+1 (822) 574-2617
昆虫纲
2017-10-19T08:18:09-01:00
真的
5.
杨国宝
+1 (875) 492-3905
德尔菲德
2016-08-15T01:31:55-01:00
假的

试试这段代码

.table th {
    padding : 0;
    padding-right :  0.2rem;
}

.table td {
  padding: 0.2rem 0.5rem;
  text-align: center;
}

而不是：

.table th,
.table td {
  padding: 0.2rem 0.5rem;
  text-align: center;
} 

• 从不

  位置：粘性
  元素。使用

• 在
  元素上使用

  背景色

• 不要在
  元素上使用填充-在内部

  标题标签上使用填充

• .header标签

  应该是一个内部DIV，如果需要的话，不需要“分类”
  元素

• type=“boolean”

  是无效的

  type

  值。使用

  string

  或更确切地说是

  type=“checkbox”

/*QuickReset*/*{margin:0；框大小：border-box；}
/*
床头
https://stackoverflow.com/a/47923622/383904
*/
1.固定床头{
溢出y：自动；
高度：180像素；
}
.床头柜{
位置：粘性；
排名：0；
}
.桌子{
边界塌陷：塌陷；
字体系列：Arial、Helvetica、无衬线字体；
}
.表th{
背景：#fff；
}
.表th.标题标签{
填充：0.2rem 0.5rem；
光标：指针；
背景：线性梯度（0度，#e4eff8，#4578a2 5%，#e4eff8 150%）；
颜色：白色；
边框：1px纯白；
空白：nowrap；
}
.表td{
填充：0.2rem 0.5rem；
文本对齐：居中；
边框：1px实心#e4eff8；
}
.表格输入{
显示：块；
宽度：100%；
字体：14px/1.4无衬线；
}

指数
名称
电话
单位
登记
是活跃的
0
白豆
+1 (871) 458-2959
摩加尼奇
2018-12-27T11:28:50-01:00
假的
1.
诺克斯霍尔曼
+1 (880) 497-2808
内地
2017-05-07T02:54:22-01:00
假的
2.
白兰地结肠
+1 (969) 513-2827
下基因
2017-06-07T06:42:31-00:00
真的
3.
苏塞特·奥斯汀
+1 (863) 445-3604
喷气式飞机
2015-10-24T11:10:41-01:00
真的
4.
唐斯凯恩酒店
+1 (822) 574-2617
昆虫纲
2017-10-19T08:18:09-01:00
真的
5.
杨国宝
+1 (875) 492-3905
德尔菲德
2016-08-15T01:31:55-01:00
假的

作为一种解决方法，您可以使用绝对位置输入和相对位置包装来匹配列大小

我不认为这是一个好的解决方案，但它是有效的

正如@Roko C.Buljan的回答中提到的，您可以做得更好

.table{
字体系列：Arial、Helvetica、无衬线字体；
}
.餐桌{
位置：粘性；
排名：0；
}
.表thead th{
边框：1px实心#e4eff8；
背景：白色；
光标：指针；
}
.表THAD th.标题标签{
光标：指针；
背景：线性梯度（0度，#e4eff8，#4578a2 5%，#e4eff8 150%）；
颜色：白色；
边框：1px纯白；
}
.表th，
.表td{
填充：0.2rem 0.5rem；
文本对齐：居中；
职位：房地产；
}
.表td{
边框：1px实心#e4eff8；
}
.table.input_包装器{
位置：相对位置；
宽度：100%；
显示：块；
}
.table.input_包装器：：after{
内容：“+”；
颜色：rgba（0,0,0,0）；
显示：块；
}
.表格输入{
位置：绝对位置；
宽度：100%；
左：0；
}

指数
名称
电话
单位
登记
是活跃的
0
白豆
+1 (871) 458-2959
摩加尼奇
2018-12-27T11:28:50-01:00
假的
1.
诺克斯霍尔曼
+1 (880) 497-2808
内地
2017-05-07T02:54:22-01:00
假的
2.
白兰地结肠
+1 (969) 513-2827
下基因
2017-06-07T06:42:31-00:00
真的
<tr>
  <th><div class="input-container"><input type="number"></div></th>
  <th><div class="input-container"><input type="string"></div></th>
  <th><div class="input-container"><input type="string"></div></th>
  <th><div class="input-container"><input type="string"></div></th>
  <th><div class="input-container"><input type="date"></div></th>
  <th><div class="input-container"><input type="boolean"></div></th>
</tr>

table .input-container {
  width: 0;
}

let cont = document.querySelectorAll('.input-container')
for (let i = 0; i < cont.length; i++) {
  cont[i].style.width = cont[i].parentNode.offsetWidth + 'px'
}