添加border-bottom到表行<tr>

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

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

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

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

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

但还是不管用。

我更喜欢使用CSS，因为这样我就不需要为每一行添加一个样式属性。我还没有添加一个边界属性到<表>。我希望这不会影响我的CSS。

当前回答

Use

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

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

2015-12-28 19:34:19

其他回答

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

2019-02-19 17:47:02

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

2012-04-06 08:14:50

HTML

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

CSS

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

2016-03-01 07:18:00

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

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

2018-09-04 13:19:07

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

2013-10-14 20:37:11

添加border-bottom到表行<tr>

推荐文章

最新文章

标签