Html 表格中特定行的边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/670424/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Border around specific rows in a table?
提问by Kyle Cronin
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.
我正在尝试设计一些 HTML/CSS，可以在表格中的特定行周围放置边框。是的，我知道我真的不应该使用表格进行布局，但我还没有足够的 CSS 知识来完全替换它。
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 <td>cells that are along the top, bottom, left, and right of the table respectively.
无论如何，我有一个包含多行和多列的表格，其中一些与 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>Is there any easier way to do what I want? I tried applying top and bottom to a <tr>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.)
有没有更简单的方法来做我想做的事？我尝试将顶部和底部应用于 a ，<tr>但没有用。（ps 我是 CSS 的新手，所以我可能错过了一个非常基本的解决方案。）
note:I do need to have multiple bordered sections. The basic idea is to have multiple bordered clusters each containing multiple rows.
注意：我确实需要有多个带边框的部分。基本思想是有多个有边界的集群，每个集群包含多行。
采纳答案by enigment
回答by Kyle Cronin
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:
感谢所有回复的人！我已经尝试了这里介绍的所有解决方案，并且在互联网上搜索了更多其他可能的解决方案，我想我找到了一个很有希望的解决方案：
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>Output:
输出：
Instead of having to add the top, bottom, left, and rightclasses to every <td>, all I have to do is add top rowto the top <tr>, bottom rowto the bottom <tr>, and rowto every <tr>in between. Is there anything wrong with this solution? Are there any cross-platform issues I should be aware of?
而不必到补充的top，bottom，left，和right班级的每一个<td>，都是我所要做的就是添加top row到顶部<tr>，bottom row至底部<tr>，并且row每一个<tr>之间。这个解决方案有什么问题吗？是否有任何我应该注意的跨平台问题？
回答by Sunrise
If you set the border-collapsestyle to collapseon the parent table you should be able to style the tr:
(styles are inline for demo)
如果您将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:
输出：
回答by Simon East
I was just playing around with doing this too, and this seemed to be the best option for me:
我也只是在玩这个，这对我来说似乎是最好的选择：
<style>
tr {
display: table; /* this makes borders/margins work */
border: 1px solid black;
margin: 5px;
}
</style>
Note that this will prevent the use of fluid/automatic column widths, as cells will no longer align with those in other rows, but border/colour formatting still works OK. The solution is to give the TR and TDs a specified width(either px or %).
请注意，这将阻止使用流体/自动列宽，因为单元格将不再与其他行中的单元格对齐，但边框/颜色格式仍然可以正常工作。解决方案是给 TR 和 TD 一个指定的宽度（px 或 %）。
Of course you could make the selector tr.myClassif you wanted to apply it only to certain rows. Apparently display: tabledoesn't work for IE 6/7, however, but there's probably other hacks (hasLayout?) that might work for those. :-(
当然，tr.myClass如果您只想将选择器应用于某些行，则可以制作选择器。display: table然而，显然不适用于 IE 6/7，但可能还有其他黑客（hasLayout？）可能适用于那些。:-(
回答by sipwiz
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.
这是一种使用 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>
回答by csi
Group rows together using the <tbody>tag and then apply style.
使用<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>
And the css in style.css
和 style.css 中的 css
.red-outline {
outline: 1px solid red;
}
回答by cletus
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.
根据您想要在任意 MxN 单元格块周围放置边框的要求，如果不使用 Javascript，确实没有更简单的方法。如果您的单元格是固定的，您可以使用浮点数，但由于其他原因，这是有问题的。你正在做的事情可能很乏味，但没关系。
Ok, if you're interested in a Javascript solution, using jQuery (my preferred approach), you end up with this fairly scary piece of code:
好的，如果您对使用 jQuery（我的首选方法）的 Javascript 解决方案感兴趣，您最终会得到这段相当可怕的代码：
<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>
I'll happily take suggestions on easier ways to do this...
我很乐意就更简单的方法提出建议......
回答by sipwiz
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.
我能想到的唯一另一种方法是将需要边框的每一行括在嵌套表中。这将使边框更容易做，但可能会产生其他布局问题，您必须手动设置表格单元格的宽度等。
Your approach may well be the best one depending on your other layout rerquirements and the suggested approach here is just a possible alternative.
根据您的其他布局要求，您的方法很可能是最好的方法，这里建议的方法只是一种可能的替代方法。
<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>
回答by Basheer AL-MOMANI
the trick is with outline propertythanks to enigment's answerwith little modification
由于enigment 的答案几乎没有修改，诀窍在于大纲属性
use this class
使用这个类
.row-border{
outline: thin solid black;
outline-offset: -1px;
}
then in the HTML
然后在 HTML 中
<tr>....</tr>
<tr class="row-border">
<td>...</td>
<td>...</td>
</tr>
and the result is
hope this helps you
结果是
希望这对你有帮助
回答by Curtis
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
