如何让表格单元格内输入框填满单元格且不扩展整行宽度？

核心问题分析 #

你遇到的问题有两个关键原因：

1. 输入框默认带内置最小宽度，加上.textEntry设置的固定width:140px，会强制单元格（进而整列）扩大以适应输入框，而不是输入框贴合现有列宽。
2. HTML结构不符合规范：<form>直接包裹<tr>可能导致浏览器渲染异常，影响宽度计算逻辑。

解决方案 #

1. 修复HTML结构

按照规范，<tr>不能直接作为<form>的子元素，需调整表单位置。如果要提交整行输入内容，可将表单放在<tfoot>内包裹输入行（现代浏览器支持），或把表单嵌入最后一个<td>并通过JS收集所有输入值：

echo"</tbody>";
echo"
    <tfoot>
        <form action='./' method='post'>
            <tr id='inputRow'>
                <td><input type='text' name='firstname' class='textEntry'></td>
                <td><input type='text' name='lastname' class='textEntry'></td>
                <td><input type='text' name='email' class='textEntry' id='emailEntry'></td>
                <td><input type='text' name='grade' class='textEntry' id='gradeEntry'></td>
                <td></td><td></td><td></td>
                <td><input type='submit' value='+' class='submit' id='rm'></td>
            </tr>
        </form>
    </tfoot>
";
echo"</table>";

2. 调整CSS强制输入框适配列宽

修改输入框样式，覆盖固定宽度并打破默认最小宽度限制：

#inputRow td input.textEntry {
    width: 100%;
    box-sizing: border-box;
    min-width: 0; /* 关键：消除输入框默认最小宽度，让它完全贴合单元格 */
    /* 保留原.textEntry的其他样式 */
    font-family: 'Poppins', sans-serif;
    color:var(--normal);
    background-color:var(--background);
    border-color:var(--normal);
    border-radius:5px;
    border-width: 2px;
}

如果不需要其他地方的输入框用固定宽度，也可以直接删除.textEntry里的width:140px，简化样式。

3. 确保表格列宽由现有内容决定

表格默认的table-layout: auto会优先根据前面数据行的内容计算列宽，只要前面的行已经确定了列宽，输入框设置width:100%就会自动贴合现有宽度，不会撑大表格。

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