将border-bottom添加到表行

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

Link

Answer 2

之前我遇到过这样的问题。我不认为tr可以直接采用边框样式。我的解决方法是设置行中td的样式：

<tr class="border_bottom">

CSS：

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

Answer 3

在表格上使用border-collapse:collapse，在tr

上使用border-bottom: 1pt solid black;

Answer 4

使用

Nathan写道，

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

将行显示为块。

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

并简单地显示替代颜色：

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

Answer 7

使用

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

替换＆＃34;薄固体＆＃34;使用CSS属性。

Answer 8

我发现使用这种方法时，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;
}

Answer 9

<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一次适用于所有四个边界。

您可以查看（以及自己尝试>更多详细信息here

Answer 10

我尝试添加

    table {
      border-collapse: collapse;
    }   

与

相邻

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

，然后注释掉边界折叠以查看有效方法。仅有具有bottom-border属性的tr选择器对我有用！

无边框CSS。

无边框照片

CSS Border ex。

带有边框照片的桌子

Answer 11

您不能在tr元素上添加边框。这在firefox和IE 11中对我有用：

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

Answer 12

对此的另一个解决方案是border-spacing属性：

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

table {
  border-spacing: 0px;
}

<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

Answer 13

没有CSS边框底部：

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

Answer 14

您可以使用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);
}

Answer 15

几个有趣的答案。由于您只想要边框的底部（或顶部），这里还有两个。假设您想要一个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>

Answer 16

如果你不想

• 在桌子上强制折叠边框
• 使用 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 ...
}

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

希望有帮助:)

Answer 17

HTML

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

CSS

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