如何在灵活的表格中填充文本框填充可用空间？

Question

如何制作一个在最小和最大宽度之间弯曲的表格，而2列始终保持相同的宽度，第三列中的文本框填充可用空间。

这几乎在这里工作。但是当表很小时，固定列的宽度会被忽略。

<table>
    <thead>
        <tr>
            <td class="col1">
                Column 1
            </td>
            <td class="col2">
                Column 2
            </td>
            <td class="col3">
                Column 3
            </td>        
        </tr>
    </thead>
    <tbody>     
        <tr>
            <td class="col1">
                <input type="text" />
            </td>
            <td class="col2">
               fixed content
            </td>
            <td class="col3">
               fixed content
            </td>  
        </tr>
    </tbody>
</table>


.col1 {
    max-width: 25em;
    min-width: 20em;
}

.col2, .col3 {
    width: 10em;
}

input {
    width: 100%
}

fiddle

Answer 1

我不确定这是否正是您想要的，但是您需要使表格宽度为100%，因此它会在调整大小和灵活的第一列时增长。不幸的是，max-width似乎没有做任何事情。

JSFiddle