表格边框不起作用：使用 CSS 时表格行 (tr) 边框不显示

Question

这是我的样式表

<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/

Answer 1

删除tablesborder 属性。

添加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>