web-dev-qa-db-fra.com

Définir la bordure sur la table tr, fonctionne dans tout sauf IE 6 & 7

J'ai défini la bordure pour que la table event_calendar tr soit rouge, cela fonctionne dans tout sauf IE 6 & 7. Quel est le problème avec mon CSS?

table#event_calendar tr {
    border:1px solid red;
}

<div class="content-body">
<table id="event_calendar">
    <tr class="calendarHeader">
        <th><div class="calendarMonthLinks"><a href="http://webdev.herkimer.edu/calendar/2009/03/">&lt;&lt;</a></div></th>
        <th colspan="5"><h1>April 2009</h1></th>
        <th><div class="calendarMonthLinks"><a class="calendarMonthLinks" href="http://webdev.herkimer.edu/calendar/2009/05/">&gt;&gt;</a></div></th>
    </tr>
    <tr>
        <td class="calendarDayHeading">Sunday</td>
        <td class="calendarDayHeading">Monday</td>
        <td class="calendarDayHeading">Tuesday</td>
        <td class="calendarDayHeading">Wednesday</td>
        <td class="calendarDayHeading">Thursday</td>
        <td class="calendarDayHeading">Friday</td>
        <td class="calendarDayHeading">Saturday</td>
    </tr>
</table>
</div>
htmlcsshtml-table
22
Brad

IE n'honore pas la propriété border pour les balises <tr>. Cependant, il existe des solutions de contournement en plaçant une bordure supérieure et inférieure autour de chaque cellule et en utilisant "border-collapse: collapse;" donc il n'y a pas d'espace entre les cellules. Je ferai référence à cette ressource ici sur la méthode exacte, mais cela ressemblera essentiellement à ceci pour vous (je ne l'ai pas testé moi-même, donc je ne suis pas sûr que ce soit exactement correct, mais Je pense que vous pouvez le riffer.)

table#event_calendar {
    border-collapse: collapse;
    border-right: 1px solid red;
    border-left: 1px solid red;
}

table#event_calendar td, table#event_calendar th {
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}
54
Dan Lew

Votre CSS est assez sensible, mais IE ne fait tout simplement pas de bordures sur les éléments tr. Si vous utilisez ce style, vous devriez obtenir le résultat souhaité:

table#event_calendar {
    border-top:1px solid red;
    border-right:1px solid red;
    border-left:1px solid red;
    border-collapse:collapse;
}

table#event_calendar td, table#event_calendar th {
    border-bottom:1px solid red;

}
7
Thomas Petersen

Définir la frontière sur le td est la solution la plus simple. Mais si vous voulez vraiment vraiment faire les frontières sur <tr>, vous pouvez toujours définir:

tr { display:block; border-bottom:1px dotted #F00; }

Ce faisant, vous perdez la largeur commune entre le <td>. Si vous voulez les rendre tous égaux en largeur, réglez l'affichage pour <td> à inline-block et définissez une certaine largeur:

td { display:inline-block; width:20%; }

Cela aide lorsque vous voulez dessiner une bordure sur le <td> et sur <tr>.

Contenu généré par CSS comme tr:before{} ou tr:after{} peut toujours aider aussi.

4
pierrepierre

Changez votre sélecteur CSS en "table # event_calendar tr td" et cela devrait fonctionner.

0
David