Question

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

基本上输入框的高度应该等于表格单元格的高度。（洋红色应覆盖所有黄色）。在chrome中，这可以通过向输入css添加高度：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

＆＃13;

* { 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;
}

＆＃13;

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

＆＃13;

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

1 个答案: