在表格中的特定行周围边框？

我试图devise一些HTML / CSS，可以放在一个表中的特定行周围的边框。是的，我知道我真的不应该使用表布局，但我不知道足够的CSS来完全取代它。

无论如何，我有一个表有多个行和列，有些与rowspan和colspan合并，我想在表的一部分放一个简单的边框。目前，我使用4个独立的CSS类（顶部，底部，左侧，右侧），分别附加在表格的顶部，底部，左侧和右侧的<td>单元格中。

 .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; }

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

有没有更简单的方法来做我想要的？我尝试应用顶部和底部的<tr>但它没有工作。（ps我是新来的CSS，所以这可能是一个非常基本的解决scheme，我已经错过了。）

注意：我需要有多个有边界的部分。基本思想是拥有多个有边界的簇，每个簇都包含多行。

tr {outline: thin solid black;} ？适用于tr或tbody元素，似乎与大多数浏览器（包括IE 8+）兼容，但不兼容。

感谢所有的回应！我已经尝试了所有在这里提出的解决scheme，我已经做了更多的search在互联网上其他可能的解决scheme，我想我已经find了一个有希望的：

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

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

如果在父表上设置border-collapse样式为border-collapse样式，则应该能够对样式进行样式设置：（样式是内联的，用于演示）

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

输出：

HTML输出

我只是在玩这个游戏，这对我来说似乎是最好的select：

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

请注意， 这将防止使用stream体/自动列宽 ，因为单元格将不再与其他行中的单元格alignment，但边框/颜色格式仍然可以正常工作。解决方法是给TR和TD指定的宽度 （px或％）。

当然，如果您只想将其应用于特定的行，则可以selecttr.myClass 。显然， display: table不适用于IE 6/7，但是可能还有其他的hack（hasLayout？）可能适用于这些。 🙁

这里有一个使用tbody元素的方法，可以做到这一点。你不能在tbody上设置边框（和你不能在tr上一样），但是你可以设置背景颜色。如果你想达到的效果可以用行组而不是边界上的背景颜色来获得，那么这将起作用。

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

我能想到的唯一方法就是将每个需要边框的行放在嵌套表中。这将使边界更容易做，但可能会创build其他布局问题，你将不得不手动设置表格单元格的宽度等

您的方法可能是最好的方法，这取决于您的其他布局要求，而这里提出的方法只是一个可能的select。

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

根据你的要求，你想围绕一个MxN单元的任意块放一个边框，没有使用Javascript真的没有更简单的方法。如果你的单元格被固定，你可以使用浮动，但这是有问题的其他原因。你在做什么可能是单调乏味，但没关系。

好的，如果你对Javascript解决scheme感兴趣，使用jQuery（我的首选方法），你会得到这个相当可怕的代码：

 <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(" + 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"); }); }); } </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>

我会很乐意采取更简单的方法来做到这一点的build议…

使用<tbody>标记将行分组在一起，然后应用样式。

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

和style.css中的CSS

 .red-outline { outline: 1px solid red; }

诀窍是大纲属性感谢enigment的答案很less修改

使用这个类

 .row-border{ outline: thin solid black; outline-offset: -1px; }

然后在HTML中

 <tr>....</tr> <tr class="row-border"> <td>...</td> <td>...</td> </tr>

结果是在这里输入图像说明希望这可以帮助你

更简单的方法是将表格作为服务器端控件。你可以使用类似这样的东西：

 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

在表格中的特定行周围边框？

CSS三angular形自定义边框颜色