表格中特定行的边框？
https://stackoverflow.com/questions/670424
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我正在尝试设计一些 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 新手，所以我可能错过了一个非常基本的解决方案。）
笔记： 我确实需要有多个边框部分。基本思想是拥有多个有边界的簇，每个簇包含多行。
其他提示
感谢您对所有已作出回应！我已经尝试了所有在这里提出的解决方案，我已经做了更多的互联网上寻找其他可行的解决办法，我想我找到了一个有前景的：
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>
<强>输出：
代替具有到top，bottom，left和right类添加到每<td>的，所有我必须做的是顶端top row，<tr>至底部bottom row，和<tr>添加row到中间的每一个<tr>。有什么不对的解决方案？是否有任何跨平台的问题，我应该知道的？
如果您设置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>
<强>输出：
我只是在玩弄过这样做，这似乎是对我最好的选择：
<style>
tr {
display: table; /* this makes borders/margins work */
border: 1px solid black;
margin: 5px;
}
</style>
请注意这将阻止使用流体/自动列宽度，因为细胞将不再与那些在其他行对齐，但边框/颜色格式仍然工作正常。该解决方案是为得到TR和TDS具有指定的宽度（或者PX或％）。
当然，你可以做出选择tr.myClass如果你想把它仅适用于某些行。显然display: table不适用于IE 6/7工作，但是，但有可能是其他黑客（hasLayout的？）可能工作为那些。 ： - （
下面是一个使用这可能是做到这一点的方式TBODY元素的方法。你不能设置一个TBODY边界（一样的，你不能在TR），但你可以设置背景颜色。如果你想acheive效果可与背景颜色上的行组来获得，而不是一个边界，这将正常工作。
<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>
组的行一起使用<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;
}
我能想到的这样做的唯一的另一种方式是封闭每次需要周围的边框嵌套表中的行。这将使边境更容易做，但将有可能创造其他的布局问题，你必须手动设置宽度上的表格单元格等。
您的做法很可能取决于你的其他布局rerquirements最好的一个，这里的建议的方法仅仅是一个可能的选择。
<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>
确实是这样做不使用Javascript没有更简单的方法。如果你的细胞是固定的，你可以使用花车，但这是出于其他原因的问题。你在做什么可能是乏味的，但它的罚款。
确定，如果你有兴趣在一个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>
我将愉快地采取更简单的方法来做到这一点建议...
这是更简单的方法是使表中的服务器侧的控制。你可以使用类似这样：
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
