Faire champ de saisie de texte pleine largeur à l'intérieur d'une cellule de tableau

http://jsfiddle.net/p1my39fh/

CSS:

table {
    width: 550px;
    border-collapse:collapse;
    margin: auto;
    background-color: #A4A4A4;
    border: 2px solid black;
    padding: 0;
}
table td {
    position: relative;
    text-align: center;
    border: 2px solid green;
    padding: 0;
    margin: 0;
}

HTML:

<table>
    <tr>
        <td><input type="text" size="30"/></td>
        <td>Test Information</td>
    </tr>
</table>

Comment puis-je supprimer l'espace autour de la <input>?

Comment puis-je faire à la fois <td>s à être de la même largeur?

  • pourquoi ne pas vous fixer la largeur de la td à 275px, puisque vous avez une largeur fixe?
  • Réglez l'entrée de width: 100%.
  • Je jure que j'ai essayé et ça ne fonctionne pas, toutefois, j'ai juste essayé de nouveau et il a fait un travail. Merci. (Je me sens idiote) (concernant la largeur de 275px)
InformationsquelleAutor DerekConlon | 2015-06-11
  1. 8

    De faire à la fois <td>s pour avoir la même largeur, vous pouvez définir:

    table {
    width: 550px;
    table-layout: fixed;
}

    Avoir le <input> pour remplir toute la largeur de la <td>, vous pouvez définir:

    input {
    width: 100%;
    box-sizing: border-box;
}

    Mise à jour de la démo:

    CSS:

    table {
    width: 550px;
    border-collapse:collapse;
    margin: auto;
    background-color: #A4A4A4;
    border: 2px solid black;
    table-layout: fixed;
}
td {
    text-align: center;
    border: 2px solid green;
}
td input {
    width: 100%;
    box-sizing: border-box;
}

    HTML:

    <table>
    <tr>
        <td><input type="text" size="30"/></td>
        <td>Test Information</td>
    </tr>
</table>

    InformationsquelleAutor Stickers
  2. 4

    vous ajoutez width:50%; dans le tableau de td et d'élargir largeur d'entrée pour se débarrasser de l'espace autour d'entrée

    table td input {
 width: 100%;   
}
    InformationsquelleAutor Hien Luong
  3. 0

    La réponse a été:

    pourquoi ne pas vous fixer la largeur de la td à 275px, puisque vous avez une largeur fixe? – jp-jee le 11 Juin à 16:43

    Ce commentaire.

    Réglage de la largeur pour une longueur fixe a fonctionné pour moi.

    InformationsquelleAutor DerekConlon