添加border-bottom到表行<tr>

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

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

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

但这并没有起作用。所以我添加了这样的CSS:

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

但还是不管用。

我更喜欢使用CSS，因为这样我就不需要为每一行添加style属性了。 我还没有在<table>. properties中添加border属性。我希望这不会影响我的CSS。

992026 次浏览
小开

将border-collapse:collapse添加到表规则中:

table {
border-collapse: collapse;
}

例子

table {
border-collapse: collapse;
}


tr {
border-bottom: 1pt solid black;
}
<table>
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>

Link . Link . Link

小开

使用

border-collapse:collapse作为内森写的，你需要设置

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

小开
最佳答案

我以前遇到过类似的问题。我不认为tr可以直接采用边框样式。我的解决方法是在行中设置__abc1的样式:

<tr class="border_bottom">

CSS:

tr.border_bottom td {
border-bottom: 1px solid black;
}
小开

将行显示为块。

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

简单地显示交替颜色:

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

我发现在使用这种方法时，td元素之间的空间会在边界上形成一个间隙，但不用担心…

解决这个问题的一个方法是:

<tr>
<td>
Example of normal table data
</td>


<td class="end" colspan="/* total number of columns in entire table*/">
/* insert nothing in here */
</td>
</tr>

使用CSS:

td.end{
border:2px solid black;
}
小开

在表上使用border-collapse:collapse，在tr上使用border-bottom: 1pt solid black;

小开

使用

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

将“thin solid”替换为CSS属性。

小开

超文本标记语言

<tr class="bottom-border">
</tr>

CSS

tr.bottom-border {
border-bottom: 1px solid #222;
}
小开

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

你也可以对整行做同样的处理。

有border-bottom-style， border-top-style，border-left-style，border-right-style。或者简单的border-style一次应用于所有四个边界。

你可以看到(和试着自己在线)更多的细节在这里

小开

这里有很多不完整的答案。因为你不能给tr标签应用边框，你需要像这样给td或th标签应用边框:

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

这样做会在每个td之间留下一个小空间，如果你想让边界看起来好像是tr标签，这可能是不可取的。可以说，为了“填补空白”，你需要利用table元素的border-collapse属性，并将其值设置为collapse，如下所示:

table {
border-collapse: collapse;
}
小开

你不能给tr元素加边框。这在firefox和IE 11中都适用:

<td style='border-bottom:1pt solid black'>
小开

另一个解决方案是border-spacing属性:

table td {
border-bottom: 2px solid black;
}


table {
border-spacing: 0px;
}
<table>
<tr>
<td>ABC</td>
<td>XYZ</td>
</table>

小开

无CSS边框底部:

<table>
<thead>
<tr>
<th>Title</th>
</tr>
<tr>
<th>
<hr>
</th>
</tr>
</thead>
</table>
小开

可以使用box-shadow属性来伪造tr元素的边框。调整box-shadow的Y位置(下面表示为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);
}
小开

我试着加上

    table {
border-collapse: collapse;
}

与

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

然后注释掉border-collapse，看看效果如何。只需要使用带有bottom-border属性的tr选择器就可以了!

没有边界CSS ex。

No Border CSS ex.

无边境照片直播

No Border Photo live

CSS边界前。

CSS Border ex.

表与边境照片现场

Table with Border photo live

小开

几个有趣的答案。因为你只是想要一个边界底部(或顶部)这里还有两个。假设你想要一个3px厚的蓝色边框。在样式部分可以添加

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

在表格代码中也一样

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>
小开

如果你不想的话

  • 在桌面上执行边界崩溃
  • 使用TD元素样式

你可以使用后::选择器为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 ...
}

这是一个简单的技巧，我在一个场景中使用，我必须在表行之间放置空格，这样我就不能在表上添加边界折叠，最终结果:

enter image description here

希望能有所帮助。


提交答案