将边框设置为tr表格，除IE 6和7以外的所有内容

我将表event_calendar tr的边框设置为红色，它适用于除IE 6和7以外的所有内容。我的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>

---

IE不尊重<tr>标签的border属性。 但是，通过在每个单元格周围放置顶部和底部边框并使用“border-collapse：collapse”来解决问题。 所以细胞之间没有空间。 我将在这里提到这个资源的确切方法，但它基本上是这样给你看的（我没有自己测试过，所以我不确定这是否完全正确，但我认为你可以在它。）

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

---

你的CSS是足够明智的，但IE只是不会对tr元素做边界。 如果你使用这种风格，你应该得到预期的结果：

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;

}

---

在td上设置边框是最简单的解决方案。 但是如果你真的想在<tr>上创建边框，你可以随时设置：

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

通过这样做，你可以放宽<td>之间的公共宽度。 如果您想要使宽度均等，请将<td>的显示设置为inline-block并设置一些宽度：

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

当你想在<td>和<tr>上画一些边框时，它会有所帮助。

CSS生成的内容如tr:before{}或tr:after{}总是可以帮助您。

链接地址: http://www.djcxy.com/p/88785.html

上一篇: Set border to table tr, works in everything except IE 6 & 7

下一篇: Border around specific rows in a table?