围绕表中特定行的边框？ [英] Border around specific rows in a table?
问题描述
我想设计一些HTML / CSS，可以在表中的特定行附近放置边框。是的，我知道我不应该使用表格的布局，但我不知道足够的CSS来完全替换它。
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.
无论如何，我有一个表具有多个行和列，一些与rowspan和colspan合并，并且我想为表的部分放置一个简单的边框。目前，我使用4个单独的CSS类（顶部，底部，左，右），我附加到< td> 左侧和右侧。
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.
<html>
<head>
<style type="text/css">
.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;
}
</style>
</head>
<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新手，所以可能是一个非常基本的解决方案，我错过了。）
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.)
注意：确实需要有多个边界部分。
note: I do need to have multiple bordered sections. The basic idea is to have multiple bordered clusters each containing multiple rows.
推荐答案
tr {outline ：thin solid black;} ？在tr或tbody元素上为我工作，并且出现，以与大多数浏览器兼容，包括IE 8+但不是之前。
How about tr {outline: thin solid black;}? Works for me on tr or tbody elements, and appears to be compatible with the most browsers, including IE 8+ but not before.
这篇关于围绕表中特定行的边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
