将border-bottom添加到表行＜tr＞

本文翻译自：Add border-bottom to table row

I have a table of 3 by 3. I need a way to add a border for the bottom of every row tr and give it a specific color. 我有一个3乘3的表。我需要一种方法为每行tr的底部添加一个边框并给它一个特定的颜色。

First I tried the direct way, ie: 首先我尝试了直接的方式，即：

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

But that didn't work. 但那没用。 So I added CSS like this: 所以我添加了这样的CSS：

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

That still didn't work. 那还是行不通的。

I would prefer to use CSS because then I don't need to add a style attribute to every row. 我更喜欢使用CSS，因为我不需要为每一行添加一个style属性。 I haven't added a border attribute to the <table> . 我没有在<table>添加border属性。 I hope that that is not affecting my CSS. 我希望这不会影响我的CSS。

#1楼

参考：

#2楼

Add to your table rule: 添加到您的表规则：

table { 
    border-collapse: collapse; 
}

#3楼

Use 使用

border-collapse:collapse as Nathan wrote and you need to set border-collapse:collapse纳丹写道border-collapse:collapse ，你需要设置

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

#4楼

I had a problem like this before. 我以前遇到过这样的问题。 I don't think tr can take a border styling directly. 我不认为tr可以直接采用边框样式。 My workaround was to style the td s in the row: 我的解决方法是在样式td行中的S：

<tr class="border_bottom">

CSS: CSS：

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

#5楼

Display the row as a block. 将行显示为块。

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

and to display alternate colors simply: 并简单地显示替代颜色：

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

#6楼

I found when using this method that the space between the td elements caused a gap to form in the border, but have no fear... 我发现在使用这种方法时，td元素之间的空间会在边框中形成间隙，但不必担心......

One way around this: 解决这个问题的方法：

<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>

With the CSS: 使用CSS：

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