为 HTML 表格行添加边框，<tr>
Posted
技术标签:
【中文标题】为 HTML 表格行添加边框，<tr>【英文标题】：Giving a border to an HTML table row, <tr> 【发布时间】：2014-01-19 06:23:48 【问题描述】：是否可以一次性为表格行添加边框，<tr>，而不是给单个单元格添加边框，<td> 之类的，
<table cellpadding="0" cellspacing="0" 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>一个边框吗？
→ jsFiddle
【问题讨论】：
【参考方案1】：您可以在tr 元素上设置border 属性，但根据CSS 2.1 规范，此类属性在分离边框模型中无效，这往往是浏览器中的默认设置。参考：17.6.1 The separated borders model。 （根据 CSS 2.1，border-collapse 的 initial 值是 separate，一些浏览器也将其设置为 table 的 默认值。无论如何，最终效果是除非您明确指定 collapse，否则您在几乎所有浏览器上都会获得分隔边框。）
因此，您需要使用折叠边框。示例：
<style>
table border-collapse: collapse;
tr:nth-child(3) border: solid thin;
</style>
【讨论】：
@Robert Siemer 虽然这确实在行周围设置了边框，但它还需要“border-collapse:collapse”。不能以这种方式使用 cellpadding 属性来分隔列。下面 csmckelvey 的答案中使用的 outline 属性可以更好地控制表格的外观并实现完全相同的目标。这不应该是公认的答案，因为它不必要地限制了实现目标的功能。【参考方案2】：绝对！只需使用
<tr style="outline: thin solid">
你喜欢哪一排。这是fiddle。
当然，正如人们所提到的，如果您愿意，您可以通过 id、类或其他方式来执行此操作。
【讨论】：
<tr> 周围显示边框，但 Mozilla Fire Fox 不显示边框。
尝试使用outline 而不是border。那应该可以解决兼容性问题。我只有 Chrome atm，所以无法测试。
轮廓不是边框。
@JukkaK.Korpela 主要区别是什么？如果您使用轮廓而没有边框，是否有任何视觉差异？另外，如果这不正确，您能否提供正确的解决方案？
是的。我更新了我的答案DEMO
table td
border-top: thin solid;
border-bottom: thin solid;
table td:first-child
border-left: thin solid;
table td:last-child
border-right: thin solid;
如果您只想设置一个<tr> 的样式，您可以通过一个类来实现：Second DEMO
【讨论】：
Internet Explorer 好像不喜欢last-child（好像不支持）。
@Tiny 您希望支持哪个 IE 版本？版本 9+ 支持第一个孩子和最后一个孩子。
你不是在设计 利用 CSS 类：
tr.border
outline: thin solid;
并像这样使用它：
<tr class="border">...</tr>
【讨论】：
【参考方案5】：您可以使用 tr 元素上的 box-shadow 属性作为边框的替代品。另外，同一元素上的任何border-radius 属性也将应用于盒子阴影。
box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);
【讨论】：
这提供了比outline 更多的样式控制。应该是更高的答案。【参考方案6】：
左单元格：
style="border-style:solid;border-width: 1px 0px 1px 1px;"
中间单元格：
style="border-style:solid;border-width: 1px 0px 1px 0px;"
右单元格：
style="border-style:solid;border-width: 1px 1px 1px 0px;"
【讨论】：
【参考方案7】：<table cellpadding="0" cellspacing="0" 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>【讨论】：
你能在你的答案中添加评论并解释你做了什么改变吗？【参考方案8】：添加边框间距：0rem 0.5rem；为每个单元格 (td, th) 项在其底部创建一个空间，同时在单元格之间不留空间
table.app-table
border-collapse: separate;
border-spacing: 0rem 0.5rem;
table.app-table thead tr.border-row the,
table.app-table tbody tr.border-row td,
table.app-table tbody tr.border-row th
border-top: 1px solid #EAEAEA;
border-bottom: 1px solid #EAEAEA;
vertical-align: middle;
white-space: nowrap;
font-size: 0.875rem;
table.app-table thead tr.border-row th:first-child,
table.app-table tbody tr.border-row td:first-child
border-left: 1px solid #EAEAEA;
table.app-table thead tr.border-row th:last-child,
table.app-table tbody tr.border-row td:last-child
border-right: 1px solid #EAEAEA;
【讨论】：
【参考方案9】：使用Bootstrap 轻松多了。
第 1 步：安装到您的 <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
如果你使用的是像 Yii3 这样的框架，或者进入你的 AppAsset.php，Bootstrap5。
<?php
declare(strict_types=1);
namespace App\Asset;
use Yiisoft\Assets\AssetBundle;
use Yiisoft\Yii\Bootstrap5\Assets\BootstrapAsset;
class AppAsset extends AssetBundle
public ?string $basePath = '@assets';
public ?string $baseUrl = '@assetsUrl';
public ?string $sourcePath = '@resources/asset';
public array $css = [
'css/site.css',
];
public array $js = [
'js/app.js',
];
public array $depends = [
BootstrapAsset::class, <----------------- here
];
或者进入 Yii2 通常是 bootstrap 4
<?php
namespace frontend\assets;
use yii\web\AssetBundle;
use yii\bootstrap4\BootstrapAsset;
use yii\web\YiiAsset;
use yii\web\JqueryAsset;
/**
* Main frontend application asset bundle.
*/
class AppAsset extends AssetBundle
public $sourcePath = '@app/assets/app';
public $baseUrl = '@app';
public $css = [
'css/site.css',
'//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"' <----------------- here
];
public $depends = [
BootstrapAsset::class, <---------- here
YiiAsset::class,
JqueryAsset::class,
];
第2步：将class="table" 添加到<table>并将scope="row"添加到<th>
<table class="table">
<th scope="row">
没有主题的基本表格 - 列间隔很好，并且您有行边框。
【讨论】：
【参考方案10】：在与这个问题斗争了很长时间之后，我得出结论，非常简单的答案是用空单元格填充表格，将表格的每一行填充到相同数量的单元格（显然考虑到 colspan） .使用计算机生成的 html，安排起来非常简单，并且避免了与复杂的变通方法的冲突。插图如下：
<h3>Table borders belong to cells, and aren't present if there is no cell</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
<tr style="border-top:1px solid darkblue;">
<th>Col 1<th>Col 2<th>Col 3
<tr style="border-top:1px solid darkblue;">
<td>Col 1 only
<tr style="border-top:1px solid darkblue;">
<td colspan=2>Col 1 2 only
<tr style="border-top:1px solid darkblue;">
<td>1<td>2<td>3
</table>
<h3>Simple solution, artificially insert empty cells</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
<tr style="border-top:1px solid darkblue;">
<th>Col 1<th>Col 2<th>Col 3
<tr style="border-top:1px solid darkblue;">
<td>Col 1 only<td><td>
<tr style="border-top:1px solid darkblue;">
<td colspan=2>Col 1 2 only<td>
<tr style="border-top:1px solid darkblue;">
<td>1<td>2<td>3
</table>
【讨论】：
以上是关于为 HTML 表格行添加边框，<tr>的主要内容，如果未能解决你的问题，请参考以下文章
HTML中做的表格为什么填充 间距 边框 三个都设置为0了，表格内部行与列之间还是有空隙。