Make input fields look like table cells in bootstrap 3

Question

I have a table in bootstrap 3

<table class="table table-bordered table-condensed">
    <tbody>
        <tr>
           <td><input type="text" class="form-control" /></td>
           <td><input type="text" class="form-control" /></td>
           <td><input type="text" class="form-control" /></td>
           <td><input type="text" class="form-control" /></td>
           <td><input type="text" class="form-control" /></td>
           <td><input type="text" class="form-control" /></td>
        </tr>
    </tbody>
</table>

Can I make the input fields look like normal cells? I want the input fields to fill out the entire cells (without no input margin nor table cell padding). Just like an Excel spreadsheet where I have many cells and can write in each of them.

Solution 1

Yup. Do it this way:

input {display: block; padding: 0; margin: 0; border: 0; width: 100%;}
td {margin: 0; padding: 0;}

Fiddle: http://jsbin.com/biqomurafage/1

Solution 2

You could also try using contentEditable tables like this: DEMO

<table>
    <tbody>
        <tr>
            <th></th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
        <tr>
            <th>1</th>
            <td><span id="A1" contenteditable>#####</span></td>
            <td><span id="B1" contenteditable></span></td>
            <td><span id="C1" contenteditable></span></td>
        </tr>
        <tr>
            <th>2</th>
            <td><span id="A2" contenteditable></span></td>
            <td><span id="B2" contenteditable></span></td>
            <td><span id="C2" contenteditable></span></td>
        </tr>
    </tbody>
</table>

span {
    width: 100%;
    display: block;
}

*note, the content editable spans are required for IE to handle the contentEditable attributes correctly. Reference

Comments

[Vasspilka]

Awesome answer! May I add that you might want to put min-height: 100% for the span in order to be able to click when empty

[paul B]

Does this work if you intend to submit the table as a form?

[Robert]

@paul B - sure you can use the html table cells as input fields for a form. Just set the id and the name for each of the cell you want to submit and treat it according to your form need. That was my need too.