CODEWITHSUNDEEP
htmlcsshtml-table
Brad
Brad

Reputation: 12262

Set border to table tr, works in everything except IE 6 & 7

I set the border for the table event_calendar tr to be red, it works in everything except IE 6 & 7. What is wrong with my 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>

Upvotes: 22

Views: 61518

Answers (4)

pierrepierre
pierrepierre

Reputation: 101

Setting the border on the td is the easiest solution. But if you really really want to make the borders on <tr>, you can always set:

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

By doing this, you loose the common width between the <td>. If you want to make all of them equal on width, set the display for <td> to inline-block and set some width:

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

It helps when you want to draw some border on the <td> and on <tr>.

CSS generated content like tr:before{} or tr:after{} can always help as well.

Upvotes: 4

Thomas Petersen
Thomas Petersen

Reputation: 1012

Your CSS is sensible enough, but IE just doesn't do borders on tr elements. If you use this style you should get the intended result though:

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;

}

Upvotes: 7

Dan Lew
Dan Lew

Reputation: 87430

IE does not honor the border property for <tr> tags. However, there are workarounds by putting a top and bottom border around each cell, and using "border-collapse: collapse;" so there's no space between cells. I will refer to this resource here on the exact method, but it will essentially look like this for you (I haven't tested it myself, so I'm not sure if this is exactly right, but I think you can riff on it.)

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

Upvotes: 54

David
David

Reputation: 34563

Change your CSS selector to "table#event_calendar tr td" and it should work.

Upvotes: 0

Related Questions