Premier sélecteur d'enfant dans le tableau

J'ai créé une page qui est un portail de connexion à trois sites internet distincts. Sur cette page, j'ai affiché les trois portails de connexion à ces sites. Je suis en train de le style tout en css et que quelques classes que possible (j'ai besoin d'affiner mon css compétences).

Ce que j'ai créé un tableau avec trois lignes et deux colonnes appelé loginPortals:

<table class="loginPortals">
    <tbody>
        <tr>
            <td>Picture 1</td>
            <td>Login form 1</td>
        </tr>
        <tr>
            <td>Picture 2</td>
            <td>Login form 2</td>
        </tr>
        <tr>
            <td>Picture 3</td>
            <td>Login form 2</td>
        </tr>
    </tbody>
</table>

J'ai seulement commencé le style de la table, il est donc très incomplète, cependant j'ai du mal déjà. C'est simplifié, car je ne sais pas exactement comment ça va avoir l'air. En gros, je veux une frontière, de la sorte, apparaissant entre chaque ligne. La suite n'est pas tout à fait réaliser ce que je voulais:

.loginPortals{
    width:100%;
}
    .loginPortals tbody:first-child td{
        border-top:1px solid #000;
    }
    .loginPortals tbody tr td{
        border-bottom:1px solid #000;
        padding:1em 0;
    }

Le premier sélecteur d'enfant ne fonctionne pas comme je l'avais pensé qu'il le ferait. C'est l'application de la frontière supérieure à toutes les cellules dans toutes les lignes. Ceci est à l'origine de l'épaisseur de la ligne à double dans le milieu des rangs.

Comment puis-je résoudre ce problème de manière que le bord supérieur est uniquement appliqué à la ligne du haut, sans la création de classes supplémentaires ou l'application de tout style en ligne.

Merci!!!!

Joe

  • semble bien pour moi jsfiddle.net/6h8cD . pourriez-vous nous montrer la page web où il est le désordre?
  • Qu'est-ce que l'effet visuel que vous essayez d'atteindre? Et êtes-vous à l'aide de border-collapse:collapse sur la table?
InformationsquelleAutor joe92 | 2012-04-24
  1. 5

    Votre table frontières doivent être mis à l'effondrement:

    .loginPortals{
    width:100%;
    border-collapse: collapse;
}

    Ensuite, vous pouvez omettre le :first-child la règle et l'appliquer juste en haut et en bas des frontières pour tous vos lignes:

    .loginPortals tbody tr td{
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    padding:1em 0;
}

    Aussi, juste pour votre information, ce sélecteur:

    .loginPortals tbody:first-child td

    Signifie:

    Sélectionnez tout td élément

    dans un tbody

    c'est le premier enfant de son parent.

    Et non pas:

    Sélectionnez tout td élément

    dans le premier enfant d'un tbody.

    Depuis la tbody est le premier et le seul enfant de .loginPortals, tous les td éléments dans l'ensemble de leurs tr les parents seront sélectionnés. Voir cette réponse pour une explication visuelle. Vous avez probablement voulu ce sélecteur:

    .loginPortals tbody tr:first-child td

    Mais ce n'est pas nécessaire parce que tout ce que vous avez à faire est d'effondrement votre table frontières.

    • Je vous remercie. Cela fonctionne exactement comme je l'espère pour. Je accepter votre réponse comme le réponse, mais je dois attendre 4 minutes. Je vais l'accepter plus tard. Et je ne savais pas que sur les sélecteurs de! Ha. Merci encore pour qui.
    InformationsquelleAutor BoltClock
  2. 1

    Si je comprends bien, vous avez 3 formes et souhaitez seulement deux lignes - c'est ce que j'ai pris de I want a border of some sort appearing between each row si c'est le cas, essayez ceci.

    .loginPortals tr:first-child td{
    border-top:none;
}
.loginPortals tbody tr td{
    border-top:1px solid #000;
    padding:1em 0;
}​

    http://jsfiddle.net/u4v3Z/

    • Curieusement, il ne l'était pas, j'étais vouloir supprimer la double épaisseur entre les cellules, mais en ayant regardé vos violons à quoi il ressemble, je pense que je pourrais le faire comme ça haha. Merci.
    InformationsquelleAutor Dutchie432
  3. 0

    Je crois que ce serait le travail...

    td {border-top:1px solid #000;}
    InformationsquelleAutor skipZero
  4. 0

    Tout d'abord, si vous voulez améliorer votre CSS compétences, vous devez immédiatement cesser d'utiliser les tableaux pour la mise en page.

    Deuxième, la :first-child pseudo classe affecte les éléments qui sont le premier enfant de leurs parents. Donc, puisque vous n'avez qu'un tbody élément et il est le premier enfant de la table écrit tbody ou tbody:first-child donneront les mêmes résultats.

    Edit: je pense que ce que vous pourriez être après voici tr:first-child td (vous voulez seulement les cellules de tableau dans la première ligne du tableau pour avoir une bordure supérieure).

    Pour résoudre votre problème, vous pouvez simplement aller avec border-bottom sur tous les tds, sauf si vous avez besoin d'une bordure en haut ainsi dans ce cas, vous pourriez définir cette frontière sur la table ou vous pourriez donner à tous les tds un border-top et border-bottom. Bien sûr, cela rend une bordure double, comme vous le décrivez, mais vous pouvez faire les bordures d'un tableau à l'aide de l'effondrement border-collapse: collapse.

    Donc en bref: table {border-collapse: collapse}. Mais ne pas utiliser des tableaux pour la mise en page.

    InformationsquelleAutor powerbuoy