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

Posted 2023-03-05

【中文标题】表格边框不起作用：表格行（tr）边框没有出现使用css [重复]

【英文标题】：Table Border is Not working : Table Row (tr) Border is not appear using css [duplicate]

【发布时间】：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/

【参考方案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 上也能正常工作。但是我们不能给tableborder:1px solid #F00; 否则会有双边框出现在顶行和底行。我在这里发布最终解决方案。

这里是最终解决方案兄弟jsfiddle.net/Husen/tL7wK/12的小提琴链接

【参考方案3】：

试试这样的

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