【问题标题】: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;  }
    

    【讨论】:

      猜你喜欢
      • 2011-01-04
      • 2015-04-26
      • 1970-01-01
      • 1970-01-01
      • 2011-10-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-01-27
      相关资源
      最近更新 更多