表格边框不起作用：表格行（tr）边框没有出现使用css [重复]答案

【问题标题】：Table Border is Not working : Table Row (tr) Border is not appear using css [duplicate]表格边框不起作用：表格行（tr）边框没有出现使用css [重复]
【发布时间】：2014-07-26 01:04:21
【问题描述】：

这是我的样式表

<style>
table tr{ border:1px solid #F00 ;  }
table td{ padding:20px; }
</style>

这是一个 HTML 代码：

<table class="" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>Test</td>
    <td>testing</td>
</tr>
</table>

这是用于实时预览的 Fiddle 链接。 http://jsfiddle.net/Husen/tL7wK/

【问题讨论】：

标签： html css

【解决方案1】：

删除tables border 属性。

将border-collapse: collapse; 添加到您的CSS。这将允许tr 的边框:)

table {
  border-collapse: collapse;
}

table tr {
  border: 1px solid #F00;
  border-top: 1px solid #0F0;
}

table td {
  padding: 20px;
}

<table>
  <tr>
    <td>Test</td>
    <td>testing</td>
  </tr>
</table>

【讨论】：

太棒了！！！这工作正常，但与 IE7 不兼容 :(，但是，在其他浏览器上工作得很好。你有 IE7 的 hack 或代码吗？
不工作，但是，我找到了这样的解决方案：jsfiddle.net/Husen/tL7wK/11
这在 IE 7 中有效吗？ jsfiddle.net/tL7wK/13 - 更简单。改编自另一个答案。

【解决方案2】：

你需要给 td 添加边框例如：

<style>
table td{ padding:20px; border:1px solid #F00 ; }
</style>

DEMO

或者您可以为表格添加边框：像这样：

table{ border:1px solid #F00 ;  }
table td{ padding:20px; }

DEMO2

如果你只想要行边框效果，你可以试试这个：

table td{
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    padding:20px; 
 }

 table{ border:1px solid #F00 ;  }

DEMO3

【讨论】：

感谢您的回复，但是，我只需要逐行边框，而不是逐行边框
请查看我的更新 demo3 @Husen
我的 demo3 适用于所有版本的 IE @Husen
嘿，这是一个非常酷的解决方案，甚至在 IE7 上也能正常工作。但是我们不能给table{border:1px solid #F00; } 否则会有双边框出现在顶行和底行。我在这里发布最终解决方案。
这里是最终解决方案兄弟jsfiddle.net/Husen/tL7wK/12的小提琴链接

【解决方案3】：

试试这样的

table td{ border:1px solid #F00 ;padding:20px;  }

【讨论】：