将边框设置为表格 tr，适用于除 IE 6 和 7 之外的所有内容答案

【问题标题】：Set border to table tr, works in everything except IE 6 & 7将边框设置为表格 tr，适用于除 IE 6 和 7 之外的所有内容
【发布时间】：2010-10-09 16:07:37
【问题描述】：

我将表格 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>

【问题讨论】：

记录一下，ie8 和 ie9 似乎可以做到这一点

标签： html css html-table

【解决方案1】：

IE 不支持

标签的边框属性。但是，可以通过在每个单元格周围放置一个顶部和底部边框并使用“border-collapse:collapse;”来解决问题。所以单元格之间没有空间。具体方法我会参考this resource here，但它对你来说基本上是这样的（我自己没有测试过，所以我不确定这是否完全正确，但我认为你可以重复一下.)

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

【讨论】：

【解决方案2】：

您的 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;

}

【讨论】：

糟糕，我忘了处理“th”标签。我希望你不介意我更新我的帖子以反映我的错误。

【解决方案3】：

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

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

通过这样做，您将失去<td> 之间的共同宽度。如果你想让它们的宽度相等，请将 <td> 的显示设置为 inline-block 并设置一些宽度：

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

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

tr:before{} 或 tr:after{} 等 CSS 生成的内容也总是可以提供帮助。

【讨论】：

这个。将<tr> 标记设置为display: block 允许我在它上面设置一个边界。

【解决方案4】：

将您的 CSS 选择器更改为“table#event_calendar tr td”，它应该可以工作。

【讨论】：

然后他会在每个单元格的边上得到边框，这样不好。