blocks|key|344912|text|根据您的要求，您希望在任意一块MxN单元格周围设置边框，如果不使用Javascript，就没有更简单的方法可以做到这一点。如果你的单元格是固定的，你可以使用浮动，但由于其他原因，这是有问题的。你正在做的事情可能很单调乏味，但这是很好的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|344913|好吧，如果你对使用jQuery+(我的首选方法)的Javascript解决方案感兴趣，你最终会得到这段相当可怕的代码：|344914|<html>
<head>

<style+type="text/css">
td.top+{+border-top:+thin+solid+black;+}
td.bottom+{+border-bottom:+thin+solid+black;+}
td.left+{+border-left:+thin+solid+black;+}
td.right+{+border-right:+thin+solid+black;+}
</style>
<script+type="text/javascript"+src="jquery-1.3.1.js"></script>
<script+type="text/javascript">
$(function()+{
++box(2,+1,+2,+2);
});

function+box(row,+col,+height,+width)+{
++if+(typeof+height+==+'undefined')+{
++++height+=+1;
++}
++if+(typeof+width+==+'undefined')+{
++++width+=+1;
++}
++$("table").each(function()+{
++++$("tr:nth-child("+%2B+row+%2B+")",+this).children().slice(col+-+1,+col+%2B+width+-+1).addClass("top");
++++$("tr:nth-child("+%2B+(row+%2B+height+-+1)+%2B+")",+this).children().slice(col+-+1,+col+%2B+width+-+1).addClass("bottom");
++++$("tr",+this).slice(row+-+1,+row+%2B+height+-+1).each(function()+{
++++++$(":nth-child("+%2B+col+%2B+")",+this).addClass("left");
++++++$(":nth-child("+%2B+(col+%2B+width+-+1)+%2B+")",+this).addClass("right");
++++});
++});
}
</script>
</head>
<body>

<table+cellspacing="0">
++<tr>
++++<td>no+border</td>
++++<td>no+border+here+either</td>
++</tr>
++<tr>
++++<td>one</td>
++++<td>two</td>
++</tr>
++<tr>
++++<td>three</td>
++++<td>four</td>
++</tr>
++<tr>
++++<td+colspan="2">once+again+no+borders</td>
++</tr>
</tfoot>
</table>
</html>|code-block|syntax|javascript|344915|我很乐意采纳一些更简单的方法来做这件事。|344916|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Based on your requirement that you want to put a border around an arbitrary block of MxN cells there really is no easier way of doing it without using Javascript. If your cells are fixed with you can use floats but this is problematic for other reasons. what you're doing may be tedious but it's fine.</p>

<p>Ok, if you're interested in a Javascript solution, using jQuery (my preferred approach), you end up with this fairly scary piece of code:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;

&lt;style type="text/css"&gt;
td.top { border-top: thin solid black; }
td.bottom { border-bottom: thin solid black; }
td.left { border-left: thin solid black; }
td.right { border-right: thin solid black; }
&lt;/style&gt;
&lt;script type="text/javascript" src="jquery-1.3.1.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function() {
  box(2, 1, 2, 2);
});

function box(row, col, height, width) {
  if (typeof height == 'undefined') {
    height = 1;
  }
  if (typeof width == 'undefined') {
    width = 1;
  }
  $("table").each(function() {
    $("tr:nth-child(" + row + ")", this).children().slice(col - 1, col + width - 1).addClass("top");
    $("tr:nth-child(" + (row + height - 1) + ")", this).children().slice(col - 1, col + width - 1).addClass("bottom");
    $("tr", this).slice(row - 1, row + height - 1).each(function() {
      $(":nth-child(" + col + ")", this).addClass("left");
      $(":nth-child(" + (col + width - 1) + ")", this).addClass("right");
    });
  });
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;table cellspacing="0"&gt;
  &lt;tr&gt;
    &lt;td&gt;no border&lt;/td&gt;
    &lt;td&gt;no border here either&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;one&lt;/td&gt;
    &lt;td&gt;two&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;three&lt;/td&gt;
    &lt;td&gt;four&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td colspan="2"&gt;once again no borders&lt;/td&gt;
  &lt;/tr&gt;
&lt;/tfoot&gt;
&lt;/table&gt;
&lt;/html&gt;
</code></pre>

<p>I'll happily take suggestions on easier ways to do this...</p>


blocks|key|3335562|text|我能想到的唯一另一种方法是将需要边框的每一行包含在一个嵌套表中。这将使边框更容易做，但可能会产生其他布局问题，您将不得不手动设置表格单元格的宽度等。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3335563|你的方法可能是最好的，这取决于你的其他布局要求，这里建议的方法只是一种可能的选择。|3335564|<table+cellspacing="0">++
++++<tr>++++
++++++++<td>no+border</td>++++
++++++++<td>no+border+here+either</td>++
++++</tr>++
++++<tr>
++++++++<td>
+++++++++++++<table+style="border:+thin+solid+black">
++++++++++++++++++<tr>++++
++++++++++++++++++++++++<td>one</td>++++
++++++++++++++++++++++++<td>two</td>++
++++++++++++++++++</tr>++
++++++++++++++++++<tr>++++
++++++++++++++++++++++<td>three</td>++++
++++++++++++++++++++++<td>four</td>++
++++++++++++++++++</tr>++
+++++++++++++</table>
+++++++++</td>
++++</tr>
++++<tr>++++
+++++++++<td+colspan="2">once+again+no+borders</td>++
++++</tr>++
++++<tr>
++++++++<td>
+++++++++++++<table+style="border:+thin+solid+black">
++++++++++++++++++<tr>++++
++++++++++++++++++++++++<td>hello</td>++
+++++++++++++++++++</tr>
+++++++++++++</table>
+++++++++</td>
++++</tr>
++++<tr>++++
+++++++++<td+colspan="2">world</td>++
++++</tr>
</table>|code-block|syntax|javascript|3335565|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>The only other way I can think of to do it is to enclose each of the rows you need a border around in a nested table. That will make the border easier to do but will potentially creat other layout issues, you'll have to manually set the width on table cells etc. </p>

<p>Your approach may well be the best one depending on your other layout rerquirements and the suggested approach here is just a possible alternative.</p>

<pre><code>&lt;table cellspacing="0"&gt;  
    &lt;tr&gt;    
        &lt;td&gt;no border&lt;/td&gt;    
        &lt;td&gt;no border here either&lt;/td&gt;  
    &lt;/tr&gt;  
    &lt;tr&gt;
        &lt;td&gt;
             &lt;table style="border: thin solid black"&gt;
                  &lt;tr&gt;    
                        &lt;td&gt;one&lt;/td&gt;    
                        &lt;td&gt;two&lt;/td&gt;  
                  &lt;/tr&gt;  
                  &lt;tr&gt;    
                      &lt;td&gt;three&lt;/td&gt;    
                      &lt;td&gt;four&lt;/td&gt;  
                  &lt;/tr&gt;  
             &lt;/table&gt;
         &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;    
         &lt;td colspan="2"&gt;once again no borders&lt;/td&gt;  
    &lt;/tr&gt;  
    &lt;tr&gt;
        &lt;td&gt;
             &lt;table style="border: thin solid black"&gt;
                  &lt;tr&gt;    
                        &lt;td&gt;hello&lt;/td&gt;  
                   &lt;/tr&gt;
             &lt;/table&gt;
         &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;    
         &lt;td colspan="2"&gt;world&lt;/td&gt;  
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>


blocks|key|346318|text|这里有一种使用tbody元素的方法，可以做到这一点。你不能在tbody上设置边框(和tr上一样)，但是你可以设置背景颜色。如果您想要获得的效果可以通过行组上的背景颜色而不是边框来获得，那么这将是可行的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|346319|<table+cellspacing="0">++
++++<tbody>
++++++++<tr>++++
++++++++++++<td>no+border</td>++++
++++++++++++<td>no+border+here+either</td>++
++++++++</tr>++
++++<tbody+bgcolor="gray">
++++++++<tr>++++
++++++++++++<td>one</td>++++
++++++++++++<td>two</td>++
++++++++</tr>++
++++++++<tr>++++
++++++++++++<td>three</td>++++
++++++++++++<td>four</td>++
++++++++</tr>++
++++<tbody>
++++++++<tr>++++
+++++++++++++<td+colspan="2">once+again+no+borders</td>++
++++++++</tr>++
++++<tbody+bgcolor="gray">
++++++++<tr>++++
+++++++++++++<td+colspan="2">hello</td>++
++++++++</tr>
++++<tbody>
++++<tr>++++
+++++++++<td+colspan="2">world</td>++
++++</tr>
</table>|code-block|syntax|javascript|346320|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>Here's an approach using tbody elements that could be the way to do it. You can't set the border on a tbody (same as you can't on a tr) but you can set the background colour. If the effect you're wanting to acheive can be obtained with a background colour on the groups of rows instead of a border this will work.</p>

<pre><code>&lt;table cellspacing="0"&gt;  
    &lt;tbody&gt;
        &lt;tr&gt;    
            &lt;td&gt;no border&lt;/td&gt;    
            &lt;td&gt;no border here either&lt;/td&gt;  
        &lt;/tr&gt;  
    &lt;tbody bgcolor="gray"&gt;
        &lt;tr&gt;    
            &lt;td&gt;one&lt;/td&gt;    
            &lt;td&gt;two&lt;/td&gt;  
        &lt;/tr&gt;  
        &lt;tr&gt;    
            &lt;td&gt;three&lt;/td&gt;    
            &lt;td&gt;four&lt;/td&gt;  
        &lt;/tr&gt;  
    &lt;tbody&gt;
        &lt;tr&gt;    
             &lt;td colspan="2"&gt;once again no borders&lt;/td&gt;  
        &lt;/tr&gt;  
    &lt;tbody bgcolor="gray"&gt;
        &lt;tr&gt;    
             &lt;td colspan="2"&gt;hello&lt;/td&gt;  
        &lt;/tr&gt;
    &lt;tbody&gt;
    &lt;tr&gt;    
         &lt;td colspan="2"&gt;world&lt;/td&gt;  
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>


blocks|key|3335609|text|感谢所有回复的人！我已经尝试了这里提出的所有解决方案，我在互联网上做了更多的搜索，寻找其他可能的解决方案，我想我已经找到了一个很有前途的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3335610|​|3335611|tr.top+td+{
++border-top:+thin+solid+black;
}

tr.bottom+td+{
++border-bottom:+thin+solid+black;
}

tr.row+td:first-child+{
++border-left:+thin+solid+black;
}

tr.row+td:last-child+{
++border-right:+thin+solid+black;
}|code-block|syntax|javascript|3335612|<html>

<head>
</head>

<body>

++<table+cellspacing="0">
++++<tr>
++++++<td>no+border</td>
++++++<td>no+border+here+either</td>
++++</tr>
++++<tr+class="top+row">
++++++<td>one</td>
++++++<td>two</td>
++++</tr>
++++<tr+class="bottom+row">
++++++<td>three</td>
++++++<td>four</td>
++++</tr>
++++<tr>
++++++<td+colspan="2">once+again+no+borders</td>
++++</tr>
++++<tr+class="top+bottom+row">
++++++<td+colspan="2">hello</td>
++++</tr>
++++<tr>
++++++<td+colspan="2">world</td>
++++</tr>
++</table>

</body>

</html>|3335613|3335614|输出：|offset|length|style|BOLD|3335615|3335616|📷|atomic|3335617|3335618|不必向每个代码添加top、bottom、left和right类，我所要做的就是将top+row添加到顶部代码，将bottom+row添加到底部代码，并将<+<td>+>d14top+row>添加到两者之间的每个<+<tr>+>d15<tr>+>中。这个解决方案有什么问题吗？有没有我应该注意的跨平台问题？|CODE|3335619|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/fb535f47cfb603aeb877e65111977eee.png|imageAlt^0|0|0|0|0|0|0|3|0|0|0|1|0|0|0|9|3|D|6|K|4|P|5|14|7|1K|A|26|4|2Z|4|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|1C|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1D|8|@$N|1E|O|1F|P|Q]]|9|@]|A|$]]|$1|R|3|C|5|6|7|1G|8|@]|9|@]|A|$]]|$1|S|3|T|5|U|7|1H|8|@]|9|@$N|1I|O|1J|1|1K]]|A|$]]|$1|V|3|C|5|6|7|1L|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1M|8|@$N|1N|O|1O|P|Y]|$N|1P|O|1Q|P|Y]|$N|1R|O|1S|P|Y]|$N|1T|O|1U|P|Y]|$N|1V|O|1W|P|Y]|$N|1X|O|1Y|P|Y]|$N|1Z|O|20|P|Y]|$N|21|O|22|P|Y]]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|23|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16|17|-4]]]]

<p>Thank you to all that have responded! I've tried all of the solutions presented here and I've done more searching on the internet for other possible solutions, and I think I've found one that's promising:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>tr.top td {
  border-top: thin solid black;
}

tr.bottom td {
  border-bottom: thin solid black;
}

tr.row td:first-child {
  border-left: thin solid black;
}

tr.row td:last-child {
  border-right: thin solid black;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;

&lt;head&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;table cellspacing="0"&gt;
    &lt;tr&gt;
      &lt;td&gt;no border&lt;/td&gt;
      &lt;td&gt;no border here either&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="top row"&gt;
      &lt;td&gt;one&lt;/td&gt;
      &lt;td&gt;two&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="bottom row"&gt;
      &lt;td&gt;three&lt;/td&gt;
      &lt;td&gt;four&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="2"&gt;once again no borders&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="top bottom row"&gt;
      &lt;td colspan="2"&gt;hello&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="2"&gt;world&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p><strong>Output:</strong></p>

<p><img src="https://i.stack.imgur.com/P4NGC.png" alt="enter image description here"></p>

<p>Instead of having to add the <code>top</code>, <code>bottom</code>, <code>left</code>, and <code>right</code> classes to every <code>&lt;td&gt;</code>, all I have to do is add <code>top row</code> to the top <code>&lt;tr&gt;</code>, <code>bottom row</code> to the bottom <code>&lt;tr&gt;</code>, and <code>row</code> to every <code>&lt;tr&gt;</code> in between. Is there anything wrong with this solution? Are there any cross-platform issues I should be aware of?</p>


blocks|key|349945|text|我也只是在玩这个，这对我来说似乎是最好的选择：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|349946|<style>
++++tr+{+
++++++++display:+table;++++++++++++/*+this+makes+borders/margins+work+*/
++++++++border:+1px+solid+black;
++++++++margin:+5px;
++++}
</style>|code-block|syntax|javascript|349947|请注意，这将阻止使用流体/自动列宽，因为单元格将不再与其他行中的单元格对齐，但边框/颜色格式仍然可以正常工作。解决方案是给TR和TDs一个指定的宽度(+px或%25)。|offset|length|style|BOLD|349948|当然，如果您只想将选择器应用于某些行，则可以将其设为tr.myClass。然而，显然display:+table不能在IE6/7上工作，但可能还有其他的黑客攻击(hasLayout?)这对那些人来说可能是可行的。:-(|CODE|349949|entityMap^0|0|0|4|D|1O|E|0|Q|A|16|E|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@$I|U|J|V|K|L]|$I|W|J|X|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|Y|8|@$I|Z|J|10|K|O]|$I|11|J|12|K|O]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|Q|$]]

<p>I was just playing around with doing this too, and this seemed to be the best option for me:</p>

<pre><code>&lt;style&gt;
    tr { 
        display: table;            /* this makes borders/margins work */
        border: 1px solid black;
        margin: 5px;
    }
&lt;/style&gt;
</code></pre>

<p>Note that <strong>this will prevent the use of fluid/automatic column widths</strong>, as cells will no longer align with those in other rows, but border/colour formatting still works OK. The solution is to <strong>give the TR and TDs a specified width</strong> (either px or %).</p>

<p>Of course you could make the selector <code>tr.myClass</code> if you wanted to apply it only to certain rows.  Apparently <code>display: table</code> doesn't work for IE 6/7, however, but there's probably other hacks (hasLayout?) that might work for those.  :-(</p>


blocks|key|349983|text|如果您在父表上将border-collapse样式设置为collapse，您应该能够设置tr的样式：(样式是内联的，用于演示)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|349984|<table+style="border-collapse:+collapse;">
++<tr>
++++<td>No+Border</td>
++</tr>
++<tr+style="border:2px+solid+#f00;">
++++<td>Border</td>
++</tr>
++<tr>
++++<td>No+Border</td>
++</tr>
</table>|code-block|syntax|javascript|349985|输出：|BOLD|349986|​|349987|📷|atomic|349988|349989|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/225398b843fcb8b4e32902bde879ed74.png|imageAlt^0|8|F|S|8|18|2|0|0|0|3|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1A|8|@$9|1B|A|1C|B|M]]|D|@]|E|$]]|$1|N|3|O|5|6|7|1D|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|S|3|O|5|6|7|1I|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10|11|-4]]]]

<p>If you set the <code>border-collapse</code> style to <code>collapse</code> on the parent table you should be able to style the <code>tr</code>:
 (styles are inline for demo) </p>

<pre><code>&lt;table style="border-collapse: collapse;"&gt;
  &lt;tr&gt;
    &lt;td&gt;No Border&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr style="border:2px solid #f00;"&gt;
    &lt;td&gt;Border&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;No Border&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p><strong>Output:</strong></p>

<p><img src="https://i.stack.imgur.com/uIpvS.png" alt="HTML output"></p>


blocks|key|3335759|text|那tr+{outline:+thin+solid+black;}呢？我可以在tr或tbody元素上工作，appears可以兼容大多数浏览器，包括IE+8%2B，但在此之前不行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3335760|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/css/user-interface/^0|1|V|1G|7|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>How about <code>tr {outline: thin solid black;}</code>? Works for me on tr or tbody elements, and <a href="http://www.quirksmode.org/css/user-interface/">appears</a> to be compatible with the most browsers, including IE 8+ but not before.</p>


blocks|key|346424|text|一种更简单的方法是将表设置为服务器端控件。您可以使用类似以下内容的内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|346425|Dim+x+As+Integer
table1.Border+=+"1"

'Change+the+first+10+rows+to+have+a+black+border
+For+x+=+1+To+10
+++++table1.Rows(x).BorderColor+=+"Black"
+Next

'Change+the+rest+of+the+rows+to+white
+For+x+=+11+To+22
+++++table1.Rows(x).BorderColor+=+"White"
+Next|code-block|syntax|javascript|346426|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>An easier way is to make the table a server side control. You could use something similar to this:</p>

<pre><code>Dim x As Integer
table1.Border = "1"

'Change the first 10 rows to have a black border
 For x = 1 To 10
     table1.Rows(x).BorderColor = "Black"
 Next

'Change the rest of the rows to white
 For x = 11 To 22
     table1.Rows(x).BorderColor = "White"
 Next
</code></pre>


blocks|key|3335848|text|使用<tbody>标签将行组合在一起，然后应用样式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3335849|<table>
++<tr><td>No+Style+here</td></tr>
++<tbody+class="red-outline">
++++<tr><td>Style+me</td></tr>
++++<tr><td>And+me</td></tr>
++</tbody>
++<tr><td>No+Style+here</td></tr>
</table>++|code-block|syntax|javascript|3335850|和style.css中的css|3335851|.red-outline+{
++outline:+1px+solid+red;
}|3335852|entityMap^0|2|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>Group rows together using the <code>&lt;tbody&gt;</code> tag and then apply style.</p>

<pre><code>&lt;table&gt;
  &lt;tr&gt;&lt;td&gt;No Style here&lt;/td&gt;&lt;/tr&gt;
  &lt;tbody class="red-outline"&gt;
    &lt;tr&gt;&lt;td&gt;Style me&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;And me&lt;/td&gt;&lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tr&gt;&lt;td&gt;No Style here&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;  
</code></pre>

<p>And the css in style.css</p>

<pre><code>.red-outline {
  outline: 1px solid red;
}
</code></pre>


blocks|key|346480|text|由于enigment's+answer只做了很少的修改，这个技巧就是用outline+property实现的|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|346481|使用这个类|346482|.row-border{
++++outline:+thin+solid+black;
++++outline-offset:+-1px;
}|code-block|syntax|javascript|346483|然后在HTML中|346484|<tr>....</tr>
<tr+class="row-border">
++++<td>...</td>
++++<td>...</td>
</tr>|346485|结果就是|346486|📷|atomic|346487|希望这能对你有所帮助|346488|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/16922733/4251431|1|http://www.w3schools.com/css/css_outline.asp|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/57b441ab9e3e501fce970d96166dec3f.png|imageAlt^0|2|H|0|Z|G|1|0|0|0|0|0|0|0|1|2|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@]|9|@$A|1C|B|1D|1|1E]|$A|1F|B|1G|1|1H]]|C|$]]|$1|D|3|E|5|6|7|1I|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1J|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1K|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1L|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1M|8|@]|9|@]|C|$]]|$1|Q|3|R|5|S|7|1N|8|@]|9|@$A|1O|B|1P|1|1Q]]|C|$]]|$1|T|3|U|5|6|7|1R|8|@]|9|@]|C|$]]|$1|V|3|-4|5|6|7|1S|8|@]|9|@]|C|$]]]|W|$X|$5|Y|Z|10|C|$11|12]]|13|$5|Y|Z|10|C|$11|14]]|15|$5|16|Z|17|C|$18|19|1A|-4]]]]

<p>the trick is with <a href="http://www.w3schools.com/css/css_outline.asp" rel="nofollow noreferrer">outline property</a> thanks to <a href="https://stackoverflow.com/a/16922733/4251431">enigment's answer</a> with little modification</p>

<p>use this class </p>

<pre><code>.row-border{
    outline: thin solid black;
    outline-offset: -1px;
}
</code></pre>

<p>then in the HTML</p>

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

<p>and the result is 
<a href="https://i.stack.imgur.com/39umQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/39umQ.png" alt="enter image description here"></a>
hope this helps you</p>


<p>I'm trying to design some HTML/CSS that can put a border around specific rows in a table. Yes, I know I'm not really supposed to use tables for layout but I don't know enough CSS to completely replace it yet.</p>

<p>Anyways, I have a table with multiple rows and columns, some merged with rowspan and colspan, and I'd like to put a simple border around parts of the table. Currently, I'm using 4 separate CSS classes (top, bottom, left, right) that I attach to the <code>&lt;td&gt;</code> cells that are along the top, bottom, left, and right of the table respectively.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.top {
  border-top: thin solid;
  border-color: black;
}

.bottom {
  border-bottom: thin solid;
  border-color: black;
}

.left {
  border-left: thin solid;
  border-color: black;
}

.right {
  border-right: thin solid;
  border-color: black;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;

&lt;body&gt;

  &lt;table cellspacing="0"&gt;
    &lt;tr&gt;
      &lt;td&gt;no border&lt;/td&gt;
      &lt;td&gt;no border here either&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="top left"&gt;one&lt;/td&gt;
      &lt;td class="top right"&gt;two&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="bottom left"&gt;three&lt;/td&gt;
      &lt;td class="bottom right"&gt;four&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="2"&gt;once again no borders&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="top bottom left right" colspan="2"&gt;hello&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="2"&gt;world&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Is there any easier way to do what I want? I tried applying top and bottom to a <code>&lt;tr&gt;</code> but it didn't work. (p.s. I'm new to CSS, so there's probably a really basic solution to this that I've missed.)</p>

<p><strong>note:</strong> I do need to have multiple bordered sections. The basic idea is to have multiple bordered clusters each containing multiple rows.</p>


Border around specific rows in a table?

服务器

jQuery

我正在尝试设计一些HTML/CSS，可以在表格中的特定行周围放置边框。是的，我知道我真的不应该使用表格进行布局，但我还不知道足够多的CSS来完全取代它。不管怎样，我有一个包含多行和多列的表，其中一些行和列合并了rowspan和colspan，我想在表的某些部分周围加上一个简单的边框。目前，我使用4个独立的CSS类(顶部...

问表中特定行的边框？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表中特定行的边框？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表中特定行的边框？
EN