web-dev-qa-db-fra.com

Faire en sorte que les champs de saisie ressemblent à des cellules de tableau dans bootstrap 3

J'ai une table en 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>

Puis-je faire en sorte que les champs de saisie ressemblent à des cellules normales? Je veux que les champs d'entrée remplissent les cellules entières (sans marge d'entrée ni remplissage de cellule de tableau). Tout comme une feuille de calcul Excel où j'ai plusieurs cellules et où je peux écrire dans chacune d'elles.

htmlcsstwitter-bootstraptwitter-bootstrap-3html-table
19
Jamgreen

Ouaip. Faites-le de cette façon:

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

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

17
Praveen Kumar Purushothaman

Vous pouvez également essayer d'utiliser des tables contentEditable comme ceci: DÉMO 

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

* remarque, les plages de contenu modifiables sont requises pour IE pour gérer correctement les attributs contentEditable. Référence

11
JRulle