有没有可能一次加<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>个边界吗?

→ jsFiddle

推荐答案

您可以在tr元素上设置border个属性,但是根据CSS2.1规范,这些属性在分离边框模型中不起作用,这往往是浏览器中的默认设置.编号:17.6.1The separated borders model.(根据CSS 2.1,border-collapseinitial值是separate,一些浏览器也将其设置为tabledefault value.最终的结果是,除非您明确指定collapse,否则几乎所有浏览器上的边框都是分开的.)

因此,您需要使用折叠边框.示例:

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

Html相关问答推荐

卸载伪元素 destruct 了CSS

CSS动画积分计数器

如何在伪元素背景中定位多个CSS径向梯度

创建带有弯曲边框的水平时间线

使用响应迅速的网格系统,将两列保持在同一行,同时允许更多列用于更大的屏幕

未在抖动中播放的HTML音频||文本正在工作其他标记正在播放,但音频未播放

子元素的单一背景

为什么根捕获上的`min-height`溢出,而`height`没有?

如何在悬停时使矩形按钮上的边框变圆

在 html 和 css 中绘制表格内的倾斜线

为什么我的图像在悬停时与固定顶部栏重叠?

网页爬虫:使用时光机器进行数据采集

当悬停时,同时影响相邻的两侧div

如何使容器的大小适合其 position:absolute; 子元素的大小

HTML、CSS设计图像出格

两个span,一个在div居中,好像没有另一个,另一个在右边

右对齐 bootstrap 导航项而不是下拉菜单

如何创建带有偏移边框线的双色边框?

左右图像,响应页面大小并居中

所有幻灯片上的 Quarto RevealJS 标题