将border-bottom添加到表行<tr>

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

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

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

但这没有用。所以我像这样添加了CSS:

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

那仍然没有用。

我更喜欢使用CSS,因为这样我就不必style在每一行中添加一个属性。我尚未向中添加border属性<table>我希望那不会影响我的CSS。

神无村村2020/03/20 09:57:21

的HTML

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

的CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}
Sam小哥理查德2020/03/20 09:57:21

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

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

table {
  border-spacing: 0px;
}
<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

A樱2020/03/20 09:57:21

我尝试添加

    table {
      border-collapse: collapse;
    }   

旁边

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

然后注释掉边界崩溃以查看有效方法。只是让具有底部边界属性的tr选择器对我有用!

没有Border CSS ex。

没有Border CSS ex。

无边框照片直播

无边框照片直播

CSS Border ex。

CSS Border ex。

带有边框照片的桌子直播

带有边框照片的桌子直播

泡芙小卤蛋Tom2020/03/20 09:57:21

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

您也可以对整个行执行相同的操作。

border-bottom-styleborder-top-styleborder-left-styleborder-right-style或者只是一次将border-style其应用于所有四个边界。

您可以在此处查看(并在线尝试)更多详细信息

猴子小小Tony2020/03/20 09:57:21

您可以使用该box-shadow属性来伪造tr元素的边框调整的Y位置box-shadow(以下表示为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);
}
Near西里泡芙2020/03/20 09:57:21

我发现使用此方法时,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;
}
乐Eva2020/03/20 09:57:21

没有CSS边框底部:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>
Itachi猪猪Green2020/03/20 09:57:20

将行显示为块。

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

并简单地显示其他颜色:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}
JinJinGil2020/03/20 09:57:20

这里有很多不完整的答案。由于您无法在tr标签上应用边框,因此需要将其应用于tdth标签,如下所示:

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

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

table {
  border-collapse: collapse;
}
Tony老丝2020/03/20 09:57:20

采用

border-collapse:collapse 如内森(Nathan)所写,您需要设置

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

卡卡西小卤蛋GO2020/03/20 09:57:20

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

table { 
    border-collapse: collapse; 
}

链接

2020/03/20 09:57:20

使用border-collapse:collapse上表border-bottom: 1pt solid black;的TR

DavaidA2020/03/20 09:57:20

采用

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

用CSS属性替换“ thin solid”。

小宇宙卡卡西2020/03/20 09:57:20

我以前有这样的问题。我认为tr不能直接采用边框样式。我的解决方法是td在行中设置s的样式

<tr class="border_bottom">

CSS:

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