2

我只想给第二个和第四个<td >右侧边框...

如您所见，我有下表：

<table class="secondtd">
  <tr>
     <td> Name </td>
     <td> Class </td>
     <td> RollNo </td>
     <td> Batch </td>
   </tr>
</table>

我在css中尝试过类似的东西

.secondtd  td+td {
  border-right:solid 1px red;
}

但对我不起作用..我正在使用 IE。

4

6 回答 6

4

您可以将类 2 分配给表的第二个和第四个元素：

 <td class="secondborder"> </td>

或者你可以使用nth-child：

td:nth-child(2), td:nth-child(4) {
 border-right:thick double #ff0000;
}

http://jsfiddle.net/ekHQf/

这将选择第二个和第四个元素。如果你只有 4 个 td，你可以使用even：

td:nth-child(even) {
  border-right:thick double #ff0000;
}

http://jsfiddle.net/ekHQf/1/

编辑：

从评论中使用应用的类执行此操作：

.secondtd td:nth-child(2) {
  border-right:thick double #ff0000;
}
于 2013-02-20T10:01:05.007 回答
3

有三个基本选项。

1）在单元格上设置一个类并使用一个简单的类选择器。乏味，但适用于所有支持 CSS 的浏览器。

2）将:first-child伪类与兄弟运算符一起使用+：

.secondtd :first-child + td,
.secondtd :first-child + td + td + td {
  border-right: solid 1px red;
}

适用于所有相当现代的浏览器，甚至包括“标准模式”下的 IE 7（但不包括 IE 6）。我认为不是太笨拙，但如果它是第 42 列而不是第 2 和第 4 列，它会变得笨拙。

3）使用:nth-child(...)伪类：

.secondtd td:nth-child(2),
.secondtd td:nth-child(4) {
  border-right: solid 1px red;
}

适用于现代浏览器，包括“标准模式”下的 IE 9（但不是早期版本）。

在这种特殊情况下，您可以使用较短的选择器列表，因为在此处的列号范围内，只有 2 和 4 对应2n（其中n隐式采用所有非负整数值 0、1、2、...）：

.secondtd td:nth-child(2n) {
  border-right: solid 1px red;
}
于 2013-02-20T10:22:51.867 回答
1

尝试仅将类元素应用到您想看到它的地方，即标签中。

<table>

 <tr>
   <td> Name </td>
   <td class="secondborder"> Class </td>
   <td> RollNo </td>
   <td class="secondborder"> Batch </td>
  </tr>
 </table>
于 2013-02-20T09:58:37.763 回答
0

您可以使用 css 执行此操作nth-child：

td:nth-child(even) {
    border-right: 1px solid red;
}

这将选择每隔一个元素

于 2013-02-20T10:02:01.843 回答
0

使用nth-childcss 选择器设置对应的 td 样式。

td:nth-child(2) ,td:nth-child(4)
{
    border-right:solid 1px red;
}

小提琴

于 2013-02-20T10:05:02.590 回答
0

您可以将 nth-child 选择器与其中任何一个一起使用，:nth-child(even)或者:nth-child(2n)将其添加到每个其他 td。如果您需要支持旧版浏览器，您可以使用 jQueryeven在 td 中添加一个类并将其添加到 css 中。

css

.secondtd td.even,
.secondtd td:nth-child(even) {
    border-right: 1px solid red;
}

js

// jQuery fallback
$('.secondtd td:nth-child(even)').addClass('even');

http://jsfiddle.net/ferne97/gsU4K/

于 2013-02-20T10:14:42.040 回答