将border-bottom添加到表行<tr>

Question

我有一个3乘3的表.我需要一种方法为每行的底部添加一个边框tr并给它一个特定的颜色.

首先我尝试了直接的方式,即:

<tr style="border-bottom:1pt solid black;">

但那没用.所以我添加了这样的CSS:

tr {
border-bottom: 1pt solid black;
}

那还是行不通的.

我更喜欢使用CSS,因为那时我不需要style为每一行添加属性.我还没有添加border属性<table>.我希望这不会影响我的CSS.

Answer 1

添加border-collapse:collapse到您的表规则:

table { 
    border-collapse: collapse; 
}

链接

Answer 2

我以前遇到过这样的问题.我认为tr不能直接采用边框造型.我的解决方法是td在行中设置样式:

<tr class="border_bottom">

CSS:

tr.border_bottom td {
  border-bottom:1pt solid black;
}

Answer 3

使用border-collapse:collapse上表border-bottom: 1pt solid black;的TR

Answer 4

使用

border-collapse:collapse 正如内森所写,你需要设定

td { border-bottom: 1px solid #000; }

Answer 5

这里有很多不完整的答案.由于您无法将边框应用于tr标记,因此您需要将其应用于td或th标记,如下所示:

td {
  border-bottom: 1pt solid black;
}

这样做会在每个之间留一个小空间td,如果您希望边框看起来像是tr标记,则可能不太可能.为了"填补空白"可以说,你需要利用元素border-collapse上的属性table并将其值设置为collapse,如下所示:

table {
  border-collapse: collapse;
}

Answer 6

您可以使用该box-shadow属性来伪造tr元素的边框。调整 Y 位置box-shadow（下图表示为 2px）以调整厚度。

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

Answer 7

我尝试添加

    table {
      border-collapse: collapse;
    }   

旁边

    tr {
      bottom-border: 2pt solid #color;
    }

然后注释掉 border-collapse 看看效果如何。只是让带有底部边框属性的 tr 选择器对我有用！

无边框 CSS 前。

无边框照片直播

CSS 边框前。

带边框照片直播的桌子

Answer 8

将行显示为块.

tr {
    display: block;
    border-bottom: 1px solid #000;
}

并简单地显示替代颜色:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

Answer 9

使用

table{border-collapse:collapse}
tr{border-top:thin solid}

用CSS属性替换"thin solid".

Answer 10

如果你不想

• 强制表格边框折叠
• 使用 TD 元素样式

您可以使用::after选择器向 TR 添加边框：

table tbody tr {
    position : relative; # to contain the ::after element within the table-row
}

table tbody tr td {
    position : relative; # needed to apply a z-index
    z-index : 2; # needs to be higher than the z-index on the tr::after element
}

table tbody tr::after {
    content : '';
    position : absolute;
    z-index : 1; # Add a z-index below z-index on TD so you can still select data from your table rows :)
    top : 0px;
    left : 0px;
    width : 100%;
    height : 100%;
    border : 1px solid green; # Style your border here, choose if you want a border bottom, top, left, etc ...
}

这是一个简单的技巧，我在必须在表行之间放置空格的情况下使用，因此我无法在表上添加边框折叠，最终结果：

希望能帮助到你 ：）