Question

以下是我试图实现的目标：demo

.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％，输入也不会沿着细胞伸展。

我有一个表，如果文本很长（这是我想要的），单元格会垂直展开。问题是，如果我想拥有可编辑的单元格（例如演示中的第三个单元格），则输入是静态的，并且不会生长和＃34;与文字。有没有css-only方式，或J-Query来解决这个问题？

Answer 1

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

<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>

我使用 contenteditable 。这是html5功能。

使CSS输入像表格单元格一样

1 个答案: