使输入标签填充表格单元格

Question

我已经搜索过，几年前网上有一些帖子说这是不可能的。不过可能是现在。我只需要这个在现代浏览器上工作。法郎，铬，IE11。这目前适用于 Firefox 和 Chrome，但不适用于 IE11。

http://jsfiddle.net/predbjax/18/

基本上输入框的高度应该等于表格单元格的高度。 （洋红色应该覆盖所有的黄色）。在 chrome 中，这可以通过在输入 css 中添加 height: 100% 来完成。这在 Firefox 中不起作用。一种解决方案是为表格行设置固定高度，但这并不理想。

<table>
    <tr>
        <td>Large text</td>
        <td><input type="text" value="test"></td>
    </tr>
</table>

和css：

* { margin: 0; padding: 0; }
table
{
    border-spacing: 0;
}
table td:first-child
{
    font-size: 50px;
    background-color: #f00;
}
table td:last-child
{
    position:relative;
    background-color: #ff0;
}
input
{
    background-color: #f0f;
    border: none;
    position:absolute;
    height: 100%;
    top: 0;
}

Answer 1

这里是更新的小提琴。请检查。

Fiddle

* { margin: 0; padding: 0; }
table
{
    border-spacing: 0;
}
table td:first-child
{
    font-size: 50px;
    background-color: #f00;
}
table td:not(:first-child)
{
    background-color: #ff0;    
}
input
{
    background-color: #f0f;
    border: none;
    height: 100%;
    font-size: 50px;
}

<table>
    <tr>
        <td>Large text</td>
        <td><input type="text" value="test"></td>
    </tr>
</table>