表中特定行的边框？

我正在尝试设计一些 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>上，但是没有用。(另外，我是 CSS 的新手，所以可能有一个非常基本的解决方案，我已经错过了。)

注意: 我确实需要有多个带边框的部分。基本思想是有多个带边的集群，每个集群包含多个行。

323012 次浏览
小开

基于您希望在任意块的 MxN 单元周围添加边框的要求，如果不使用 Javascript，实际上没有更简单的方法可以实现这一点。如果您的单元格是固定的，那么您可以使用 float，但是由于其他原因，这是有问题的。你现在做的事情可能很乏味，但是没关系。

好吧，如果你对 Javascript 解决方案感兴趣，使用 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>

我很乐意听取一些简单的建议。

小开

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.

您的方法可能是最好的，这取决于您的其他布局需求，这里建议的方法只是一个可能的替代方案。

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

下面是一种使用 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>
小开

感谢所有的回应！我尝试了这里提出的所有解决方案，在互联网上搜索了更多其他可能的解决方案，我认为我找到了一个很有希望的解决方案:

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>

产出:

enter image description here

不需要在每个 <td>中添加 top、 bottom、 left和 right类，我所要做的就是将 top row添加到 <tr>的顶部，将 bottom row添加到 <tr>的底部，将 row添加到中间的每个 <tr>中。这个解决方案有什么问题吗？有什么跨平台的问题需要我注意吗？

小开

我也只是随便玩玩，这对我来说似乎是最好的选择:

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

请注意，这将防止使用流体/自动柱宽，因为单元格将不再与其他行中的单元格对齐，但边框/颜色格式仍然可以正常工作。解决方案是 给 TR 和 TD 一个指定的宽度(px 或%)。

当然，如果只想将选择器 tr.myClass应用于某些行，也可以将其设置为 tr.myClass。显然，display: table不适用于 IE 6/7，但是，可能还有其他的技巧(hasLayout?)也许对他们有用。:-(

小开

如果在父表上将 border-collapse样式设置为 collapse，那么应该能够设置 tr的样式: (样式是内联的演示)

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

Output:

HTML output

小开
最佳答案

tr {outline: thin solid black;}呢？对我来说，tr 或 tbody 元素和 出现了可以与大多数浏览器兼容，包括 IE8 + ，但在此之前不能兼容。

小开

An easier way is to make the table a server side control. You could use something similar to this:

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

使用 <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;
}
小开

技巧是 轮廓财产感谢 恩尼格曼的回答几乎没有修改

用这门课

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

then in the HTML

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

结果就是 enter image description here 希望这能帮到你


提交答案