Making a CSS input act like a table cell

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?

input won;t break to new line, have to use textarea for that — charlietfl
– charlietfl, Commented Jan 24, 2015 at 5:23

Amaranadh Meda · Accepted Answer · 2015-01-24 05:31:55Z

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 .

answered Jan 24, 2015 at 5:31

Amaranadh Meda

7244 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3180077 Over a year ago

Awesome. With table-layout:fixed; I get the result I wanted. Thank you!

Collectives™ on Stack Overflow

Making a CSS input act like a table cell

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related