Chrome浏览器中表格内<input type='date'>百分比宽度异常问题

这个坑我之前踩过！Chrome对原生日期输入框的样式处理确实有点“特立独行”，导致直接用百分比宽度时和文本输入框表现不一致，核心原因和解决方法我给你理清楚：

问题根源 #

Chrome给<input type="date">内置了固定的最小宽度和特殊的布局计算逻辑，哪怕你设置了width:100%，它也会优先遵循内置的最小宽度，而不是完全继承父容器的宽度。另外你的表格默认是table-layout:auto（自动布局），列宽会根据内容自动调整，这也会干扰你设置的百分比宽度生效。

完整解决方案 #

分两步就能搞定，既支持表格宽度动态变化，又能让两个输入框按比例适配：

1. 先固定表格布局，控制列宽比例

给表格加上table-layout:fixed，让列宽严格按照你设置的比例分配，而不是被内容撑开：

table {
  width: 200px;
  table-layout: fixed; /* 关键：强制按设置的列宽比例计算 */
  border-collapse: collapse; /* 可选，让表格边框更规整 */
}

/* 按需分配两个td的宽度比例 */
td:first-child {
  width: 70%;
}
td:last-child {
  width: 30%;
}

2. 重置日期输入框的样式限制

给所有输入框统一盒模型，同时解除Chrome对日期输入框的最小宽度限制：

input {
  width: 100%;
  box-sizing: border-box; /* 确保padding、边框不会超出父元素宽度 */
}

input[type="date"] {
  min-width: 0; /* 核心：解除Chrome内置的最小宽度限制 */
  /* 如果你想去掉原生的日期选择箭头，可添加下面一行，非必须 */
  /* appearance: none; */
}

效果验证 #

这样设置后：

• 两个输入框会完全撑满各自的<td>，宽度和你设置的列宽比例一致
• 当表格宽度变化时，输入框会自动按比例适配，不需要改固定像素值
• 再单独给input[type="date"]设置百分比宽度（比如50%），它会基于父<td>的宽度计算，而不是出现之前的固定80px情况

内容的提问来源于stack exchange，提问作者stramin