Html 将边框设置为表格 tr，适用于除 IE 6 和 7 之外的所有内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/583539/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set border to table tr, works in everything except IE 6 & 7
提问by Brad
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?
我将表 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/"><<</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/">>></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>
回答by Dan Lew
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 hereon 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.)
IE 不支持 <tr> 标签的边框属性。但是，通过在每个单元格周围放置顶部和底部边框并使用“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;
}
回答by Thomas Petersen
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:
你的 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;
}
回答by pierrepierre
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:
在 td 上设置边框是最简单的解决方案。但是，如果您真的真的想在 上<tr>设置边框，则始终可以设置：
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-blockand set some width:
通过这样做，您可以松开<td>. 如果你想让它们的宽度相等，请将显示设置为<td>toinline-block并设置一些宽度：
td { display:inline-block; width:20%; }
It helps when you want to draw some border on the <td>and on <tr>.
当您想在<td>和 上绘制一些边框时，它会有所帮助<tr>。
CSS generated content like tr:before{}or tr:after{}can always help as well.
CSS 生成的内容喜欢tr:before{}或tr:after{}总是可以提供帮助。
回答by David
Change your CSS selector to "table#event_calendar tr td" and it should work.
将您的 CSS 选择器更改为“table#event_calendar tr td”，它应该可以工作。
