为 HTML 表格行添加边框,
有没有可能一次加<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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
这给出了一个围绕给定<tr>
的边界,但它需要一个围绕单个单元格的边界.
我们能一次性给<tr>
个边界吗?
推荐答案
您可以在tr
元素上设置border
个属性,但是根据CSS2.1规范,这些属性在分离边框模型中不起作用,这往往是浏览器中的默认设置.编号:17.6.1The separated borders model.(根据CSS 2.1,border-collapse
的initial值是separate
,一些浏览器也将其设置为table
的default 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 标题
实用课程推荐
有没有可能一次加<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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
这给出了一个围绕给定<tr>
的边界,但它需要一个围绕单个单元格的边界.
我们能一次性给<tr>
个边界吗?
推荐答案
您可以在tr
元素上设置border
个属性,但是根据CSS2.1规范,这些属性在分离边框模型中不起作用,这往往是浏览器中的默认设置.编号:17.6.1The separated borders model.(根据CSS 2.1,border-collapse
的initial值是separate
,一些浏览器也将其设置为table
的default 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 标题
实用课程推荐