将边框底部添加到表格行 <tr>答案

【问题标题】：Add border-bottom to table row <tr>将边框底部添加到表格行 <tr>
【发布时间】：2012-04-19 21:58:22
【问题描述】：

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

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

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

但这没有用。所以我添加了这样的 CSS：

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

还是不行。

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

【问题讨论】：

附带说明，如果内联样式（您问题中的第一个示例）不起作用，那么嵌入式样式（第二个示例）不太可能起作用。您还应该研究您尝试设置样式的元素的属性可用性：w3.org/TR/html-markup/tr.html
如果您想为表格的 tr 设置边框底部，可以关注此jsfiddle.net/7awN4
只是一个提示，鼓励未来的搜索者向下滚动到下面@Nathan Manousos 的答案 - 这可能是您正在寻找的解决方案

标签： html css html-table

【解决方案1】：

将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

【讨论】：

这本身不起作用。您仍然无法设置行的样式，但可以设置单元格的样式。
你错了，@Renan。折叠边框模型正是使行边框可样式化的原因。根据CSS sectoin 17.6：在单独的边框模型中，“行，[...] 不能有边框（即，用户代理必须忽略这些元素的边框属性）。” “在折叠边框模型中，可以指定围绕整个或部分单元格、行 [和] 行组 [...] 的边框”顺便说一句：它确实在我的浏览器中工作 (Chromium 37)。
我认为有些人可能会感到困惑（就像我一样）并且没有注意到需要在表格而不是行上设置边框折叠样式。
Chrome好像没有这个功能，不过支持其他的边框折叠功能。
这删除了填充。

【解决方案2】：

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

<tr class="border_bottom">

CSS：

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

【讨论】：

请注意，使用此解决方案您很可能会在 td 之间的边界处出现间隙。 simoncereska's answer 会处理这个问题，但请注意，虚线或虚线边框类型可能看起来不太好（因为它们不是连续的）
您还可以通过将cellspacing="0" 作为属性添加到<table> 来解决此问题（请参阅this question）。不过，不知道用虚线或虚线边框会是什么样子。
tr 可以在折叠边框模型中采用边框样式。 @Sangram，考虑接受一个考虑到这一点而不是这个的答案，不是吗？
如果表格单元格之间有填充，这将不起作用。如果有填充，那么边框将明显被分割成碎片。
而你的表格需要这种样式

【解决方案3】：

在桌子上使用border-collapse:collapse，在桌子上使用border-bottom: 1pt solid black;

【讨论】：

在 tr 上设置边框即使边框折叠也是没用的。你必须在 tr 的 tds 上设置它
@RaduSimionescu 错了，它在 tr 上工作得很好，边框折叠了。
在 FF 45.0.1 中无效。

【解决方案4】：

使用

border-collapse:collapse 正如 Nathan 所写，您需要设置

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

【讨论】：

我也会这样做！在 td 上添加边框并在表格上使用border-collapse

【解决方案5】：

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

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

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

table {
  border-collapse: collapse;
}

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

我尝试添加

    table {
      border-collapse: collapse;
    }

旁边

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

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

无边框 CSS 示例

现场无边框照片

CSS 边框示例

带边框照片的表格现场

【讨论】：

bottom-border 不是有效的 CSS 属性。我尝试了相同的实验，在 Windows 上的 Chrome 84.0.4147.135 中切换 border-collapse 属性。仅当属性存在且设置为collapse 时才会显示边框。

【解决方案8】：

使用

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

用 CSS 属性替换“thin solid”。

【讨论】：

【解决方案9】：

将行显示为块。

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

并简单地显示替代颜色：

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

【讨论】：

Not a good idea 为tr 设置display: block。改用tr td { border-bottom: ... } 广告tr.oddrow td { border-bottom: ... }
显示块可能会破坏表格布局。边框折叠：表格本身的折叠绝对是最好的解决方案

【解决方案10】：

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

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

table {
  border-spacing: 0px;
}

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

【讨论】：

【解决方案11】：

我在使用这个方法的时候发现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;
}

【讨论】：

【解决方案12】：

<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

【讨论】：

【解决方案13】：

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

【讨论】：

添加整个表格行和表格单元格以插入<hr>?这是一个“绝对最后的手段”类型的答案。

【解决方案14】：

底部无 CSS 边框：

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

【讨论】：

使用
肯定是作弊 ;)

【解决方案15】：

您不能在 tr 元素上设置边框。这在 Firefox 和 IE 11 中对我有用：

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

【讨论】：

你不能在 tr 上设置边框。编辑答案以澄清这一点。
这是最简单最准确的答案。

【解决方案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 ...
}

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

希望对你有帮助:)

【讨论】：

【解决方案17】：

HTML

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

CSS

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

【讨论】：

无边框没用-collapse:collapse;