Isso é bastante próximo de viável. Você deve definir size="1" como um atributo no <input> para alterar o tamanho realmente pequeno. A mudança de tamanho é controlada por input:active que cancela a classe base com width: auto;. input:focus Prevê-lo de ser reduzido quando você a tabela.
Possíveis problemas: input:focus Força a <input> para um min-size específico, o que pode ser maior do que foi alterado. Você pode min-width: 100% Faça desta “característica” em vez de um problema, dando ao usuário mais espaço para escrever. Se o <input> O tamanho da alteração ainda é limitado por , mas a alteração do tamanho é geralmente executada após o foco (e também, É usado principalmente para fazer algo maior).
demonstração: http://jsfiddle.net/ThinkingStiff/jNnCW/
html (com estilos online conforme solicitado):
<input type="text" size="1"/><style> input { resize: horizontal; width: 200px; } input:active { width: auto; } input:focus { min-width: 200px; }</style>