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

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

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

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

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

但还是不管用。

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


当前回答

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

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

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

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

其他回答

另一个解决方案是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>

Use

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

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

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

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

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

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

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