给HTML表格行加上边框，

小编典典

给HTML表格行加上边框，

css

是否可以<tr>一次性为表格行加上边框，而不是给单个单元格加上边框，<td>例如，

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">

    <tbody>

        <tr>

            <th style="width: 96px;">Column 1</th>

            <th style="width: 96px;">Column 2</th>

            <th style="width: 96px;">Column 3</th>

        </tr>



        <tr>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

        </tr>



        <tr>

            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>

            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>

            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>

        </tr>



        <tr>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

        </tr>

    </tbody>

</table>

这在给定的周围给出了边界，<tr>但在单个单元格周围需要了边界。

我们可以一口气给边界<tr>吗？

阅读 298

2020-05-16

共1个答案

小编典典

您可以border在tr元素上设置属性，但是根据CSS
2.1规范，此类属性在分隔的边框模型中不起作用，这通常是浏览器中的默认设置。参考：17.6.1
分隔的边框模型。该 初始_值border-collapse是separate根据CSS 2.1，以及一些浏览器也将其设置为 _默认值
的table。反正最终的效果是你走散了几乎所有的浏览器，除非你明确specifi边界collapse。）

因此，您需要使用折叠边框。例：

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>

2020-05-16