Question

是否可以一次性对表格行<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

Answer 1

您可以在border元素上设置tr属性，但根据CSS 2.1规范，此类属性在分隔边框模型中无效，这在浏览器中往往是默认设置。参考：17.6.1 The separated borders model。（根据CSS 2.1，border-collapse的初始值为separate，有些浏览器也将其设置为table的默认值 。无论如何，除非你明确指定collapse，否则几乎所有浏览器都会出现分隔边界的净效果。）

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

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

Answer 2

绝对！只需使用

<tr style="outline: thin solid">

你喜欢哪一行。这是一个fiddle。

当然，正如人们所提到的，如果你愿意，你可以通过身份证，班级或其他方式来做到这一点。

Answer 3

是。我更新了我的回答 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

Answer 4

使用CSS类：

tr.border{
    outline: thin solid;
}

并使用它：

<tr class="border">...</tr>

Answer 5

左栏：

style="border-style:solid;border-width: 1px 0px 1px 1px;"

midd cell（s）：

style="border-style:solid;border-width: 1px 0px 1px 0px;"

右单元格：

style="border-style:solid;border-width: 1px 1px 1px 0px;"

Answer 6

<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>

Answer 7

您可以使用tr元素上的box-shadow属性代替边框。另外，同一元素上的所有border-radius属性也将应用于框阴影。

box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);

Answer 8

添加边框间距：0rem 0.5rem；在其底部为每个单元格（td，th）项创建一个空间，同时在单元格之间不留任何空间

<td style="display:none"><input></td>

Answer 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">

或者进入你的 AppAsset.php，Bootstrap5 如果你使用的是像 Yii3 这样的框架。

<?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 通常引导 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">

一个没有主题的基本表格——列间距很好，你有你的行边框。

Answer 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表格行提供边框，

10 个答案: