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

Question

Here is the fiddle of what I'm trying to achieve: 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%;
}

Even with 100% width and height, the input doesn't seem to stretch along the cell.

I have a table where the cells expand vertically if the text is long (which is what I want). The problem is, if I want to have editable cells (such as the third one down in the demo), the input is static and doesn't "grow" with the text. Is there a css-only way, or J-Query to fix this?

Answer 1

The following solutions may works for you .

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

I used contenteditable . This is html5 feature .