blocks|key|175975|text|绝对一点儿没错!只需使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|175976|<tr+style="outline:+thin+solid">|code-block|syntax|javascript|175977|在你喜欢的那一排。这是一个fiddle。|offset|length|175978|当然，正如人们所提到的，您可以通过id、类或其他方式来实现这一点。|175979|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/d73e7/7/^0|0|0|D|6|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>Absolutely! Just use</p>

<pre><code>&lt;tr style="outline: thin solid"&gt;
</code></pre>

<p>on which ever row you like. Here's a <a href="http://jsfiddle.net/d73e7/7/">fiddle</a>.</p>

<p>Of course, as people have mentioned, you can do this via an id, or class, or some other means if you wish.</p>


blocks|key|4682032|text|使用CSS类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4682033|tr.border{
++++outline:+thin+solid;
}|code-block|syntax|javascript|4682034|并像这样使用它：|4682035|<tr+class="border">...</tr>|4682036|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Make use of CSS classes:</p>

<pre><code>tr.border{
    outline: thin solid;
}
</code></pre>

<p>and use it like:</p>

<pre><code>&lt;tr class="border"&gt;...&lt;/tr&gt;
</code></pre>


blocks|key|175998|text|左侧单元格：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|175999|style="border-style:solid;border-width:+1px+0px+1px+1px;"|code-block|syntax|javascript|176000|中间单元格：|176001|style="border-style:solid;border-width:+1px+0px+1px+0px;"|176002|右侧单元格：|176003|style="border-style:solid;border-width:+1px+1px+1px+0px;"|176004|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Left cell:</p>

<pre><code>style="border-style:solid;border-width: 1px 0px 1px 1px;"
</code></pre>

<p>midd cell(s):</p>

<pre><code>style="border-style:solid;border-width: 1px 0px 1px 0px;"
</code></pre>

<p>right cell:</p>

<pre><code>style="border-style:solid;border-width: 1px 1px 1px 0px;"
</code></pre>


blocks|key|176044|text|在与此斗争了很长一段时间后，我得出的结论是，非常简单的答案是用空单元格填充表，将表中的每一行填充到相同数量的单元格中(显然，考虑到colspan+)。使用计算机生成的HTML，这非常容易安排，并且避免了使用复杂的变通方法。插图如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|176045|<h3>Table+borders+belong+to+cells,+and+aren't+present+if+there+is+no+cell</h3>
<table+style="border:1px+solid+red;+width:100%25;+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%25;+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>|code-block|syntax|javascript|176046|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>After fighting with this for a long time I have concluded that the spectacularly simple answer is to just fill the table with empty cells to pad out every row of the table to the same number of cells (taking colspan into account, obviously). With computer-generated HTML this is very simple to arrange, and avoids fighting with complex workarounds. Illustration follows:</p>

<pre><code>&lt;h3&gt;Table borders belong to cells, and aren't present if there is no cell&lt;/h3&gt;
&lt;table style="border:1px solid red; width:100%; border-collapse:collapse;"&gt;
    &lt;tr style="border-top:1px solid darkblue;"&gt;
        &lt;th&gt;Col 1&lt;th&gt;Col 2&lt;th&gt;Col 3
    &lt;tr style="border-top:1px solid darkblue;"&gt;
        &lt;td&gt;Col 1 only
    &lt;tr style="border-top:1px solid darkblue;"&gt;
        &lt;td colspan=2&gt;Col 1 2 only
    &lt;tr style="border-top:1px solid darkblue;"&gt;
        &lt;td&gt;1&lt;td&gt;2&lt;td&gt;3

&lt;/table&gt;


&lt;h3&gt;Simple solution, artificially insert empty cells&lt;/h3&gt;

&lt;table style="border:1px solid red; width:100%; border-collapse:collapse;"&gt;
    &lt;tr style="border-top:1px solid darkblue;"&gt;
        &lt;th&gt;Col 1&lt;th&gt;Col 2&lt;th&gt;Col 3
    &lt;tr style="border-top:1px solid darkblue;"&gt;
        &lt;td&gt;Col 1 only&lt;td&gt;&lt;td&gt;
    &lt;tr style="border-top:1px solid darkblue;"&gt;
        &lt;td colspan=2&gt;Col 1 2 only&lt;td&gt;
    &lt;tr style="border-top:1px solid darkblue;"&gt;
        &lt;td&gt;1&lt;td&gt;2&lt;td&gt;3

&lt;/table&gt;
</code></pre>


blocks|key|176070|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|176071|<table+cellpadding="0"+cellspacing="0"+width="100%25"+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>|code-block|syntax|javascript|176072|176073|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none"&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;th style="width: 96px;"&gt;Column 1&lt;/th&gt;
            &lt;th style="width: 96px;"&gt;Column 2&lt;/th&gt;
            &lt;th style="width: 96px;"&gt;Column 3&lt;/th&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;"&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td style="border-top: thin solid; border-bottom: thin solid;"&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;"&gt;&amp;nbsp;&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


blocks|key|176089|text|您可以在tr元素上使用box-shadow属性作为边框的替代。另外，同一元素上的任何边界半径属性也将应用于长方体阴影。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|176090|box-shadow:+0px+0px+0px+1px+rgb(0,+0,+0);|code-block|syntax|javascript|176091|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can use the box-shadow property on a tr element as a subtitute for a border. As a plus, any border-radius property on the same element will also apply to the box shadow.</p>

<pre><code>box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);
</code></pre>


blocks|key|4682224|text|添加边框间距:+0rem+0.5rem；为每个单元格(td，th)项在其底部创建一个间距，同时不在单元格之间留出间距|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4682225|++++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;
++++}|code-block|syntax|javascript|4682226|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>adding border-spacing: 0rem 0.5rem; creates a space for each cell (td, th) items on its bottom while leaving no space between the cells</p>
<pre><code>    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;
    }
</code></pre>


<p>Is it possible to border a table row, <code>&lt;tr&gt;</code> in one go instead of giving a border to individual cells, <code>&lt;td&gt;</code> like,</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none"&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;th style="width: 96px;"&gt;Column 1&lt;/th&gt;
            &lt;th style="width: 96px;"&gt;Column 2&lt;/th&gt;
            &lt;th style="width: 96px;"&gt;Column 3&lt;/th&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;"&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td style="border-top: thin solid; border-bottom: thin solid;"&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;"&gt;&amp;nbsp;&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p>This gives a border around the given <code>&lt;tr&gt;</code> but it requires a border around individual cells.</p>

<p>Can we give a border to <code>&lt;tr&gt;</code> only in one go?</p>

<p><a href="http://jsfiddle.net/d73e7/">&rarr; jsFiddle</a></p>


Giving a border to an HTML table row, <tr>

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

是否有可能在表格行中添加边框，而不是像<td>那样为单个单元格提供边框，​<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">    <tbody>        <tr>            <t...

问为HTML表行提供边框，<tr>
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为HTML表行提供边框，<tr>EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为HTML表行提供边框，<tr>
EN