内嵌样式的tr border-bottom问题

Question

我试图将border-bottom添加到表的<tr>元素，如下所示，但它不起作用

<table>
<tr style="border-bottom: 1px solid black !important;">

当我将样式添加到<td>而不是在<tr>上时，它将起作用。 你能让我知道如何解决吗？

谢谢

Answer 1

您不能在tr元素上应用边框，需要在td上应用边框，或者需要对table元素使用border-collapse

演示 （将border-bottom应用于td ）

演示2 （如果使用border-collapse则将border-bottom应用于tr ）

table {
    width: 100%;
    border-collapse: collapse; 
}

table tr { /* Use table tr td if not using border-collapse property */
    border-bottom: 1px solid #eee;
}

注意：避免使用内联样式，在某些时候您将很难更改它们，此外，除非必要，否则请避免使用!important ，请考虑使用更具体的选择器