使 CSS 输入的行为类似于表格单元格

Making a CSS input act like a table cell

本文关键字：类似于 表格 单元格 CSS 输入      更新时间：2023-09-26

这是我想要实现的小提琴：演示

.editable-field {
    display: block;
    justify-content: inherit;
    width:100%;
    height:100%;
}
.editable-input {
    border: none;
    font-size: inherit;
    background: inherit;
    color: inherit;
    transition: 0.3s all linear;
    width:100%
    height:100%;
}

即使宽度和高度为 100%，输入似乎也不会沿单元格拉伸。

我

有一个表格，如果文本很长，单元格会垂直扩展（这就是我想要的）。问题是，如果我想拥有可编辑的单元格（例如演示中的第三个单元格），输入是静态的，不会随着文本"增长"。有没有一种仅限 css 的方法，或者 J-Query 来解决这个问题？

以下解决方案可能适合您。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<div class="container">
    <table>
        <tr>
            <td>Not Editable but very long and takes fffffffffffffff multiple lines</td>
        </tr>
        <tr>
            <td>Not Editable</td>
        </tr>
        <td contenteditable >            
               asdfad
        </td>
        <tr>
            <td>Not Editable</td>
        </tr>
    </table>
</div>

我使用了内容可编辑。这是 html5 功能。

相关文章：