添加border-collapse:collapse到你的表格规则中:

table { 
    border-collapse: collapse; 
}

例子

表{ border-collapse:崩溃; } tr { 底边:1pt纯黑色; } <表> A1 < tr > < td > < / 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 > 表> < /

Link

Use

border-collapse:像Nathan写的那样崩溃，你需要设置

Td {border-bottom: 1px solid #000;｝

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

<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:折叠桌面和边框底部:1pt纯黑色;在电话里

Use

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

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

HTML

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

CSS

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

<td style=" font - family:宋体;Border-bottom:粗虚线#ff0000;" >

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

有边界底部样式，边界顶部样式，边界左样式，边界右样式。或者简单的边框样式，同时应用于所有四个边框。

你可以在这里看到(并在网上尝试一下)更多细节

这里有很多不完整的答案。因为你不能给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属性:

表td { Border-bottom: 2px纯黑色; ｝ 表{ border-spacing: 0 px; ｝ <表> < tr > ABC < td > < / td > < td > XYZ td > < / 表> < /

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

无边境照片直播

CSS边界前。

表与边境照片现场

几个有趣的答案。因为你只是想要一个边界底部(或顶部)这里还有两个。假设你想要一个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元素样式

你可以使用::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 ...
}

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

希望能有所帮助。