css怎么控制table单双行

html-css014

css怎么控制table单双行,第1张

css控制table单双行的方法是获取到行号。

<style type="text/css">

#tb tr {

background-color: expression(

this.sectionRowIndex % 2 == 0 ? "#fff" : "#efefef"

)

TableSelect: expression(

this.sectionRowIndex == 0 ? "" :

(

onmouseover = function()

{

this.style.backgroundColor="#69CDFF"

},

onmouseout = function()

{

var color

if(this.sectionRowIndex % 2 == 0){

color = "#fff"

} else {

color = "#efefef"

}

this.style.backgroundColor=color

}

)

)

}

</style>

table如下:

<body>

<table cellspacing="1" class="FindAreaTable1" ID="DataGrid1">

<tr>

<td>首行首列</td>

<td>首行</td>

<td>首行</td>

<td>首行</td>

<td>首行</td>

<td>首行</td>

</tr>

<tr>

<td>行1首列</td>

<td>行1</td>

<td>行1</td>

<td>行1</td>

<td>行1</td>

<td>行1</td>

</tr>

<tr>

<td>行2首列</td>

<td>行2</td>

<td>行2</td>

<td>行2</td>

<td>行2</td>

<td>行2</td>

</tr>

<tr>

<td>行3首列</td>

<td>行3</td>

<td>行3</td>

<td>行3</td>

<td>行3</td>

<td>行3</td>

</tr>

<tr>

<td>行4首列</td>

<td>行4</td>

<td>行4</td>

<td>行4</td>

<td>行4</td>

<td>行4</td>

</tr>

<tr>

<td>行5首列</td>

<td>行5</td>

<td>行5</td>

<td>行5</td>

<td>行5</td>

<td>行5</td>

</tr>

</table>

</body>

</html>

css的选择符只能是从父到子,从上到下的顺序。

只有当b元素是a元素下面的兄弟元素,或者b元素是a元素的子元素的情况才能实现鼠标移到A上,A变红,B变蓝。

<style type="text/css">

.a:hover { background-color: #f00 }

.a:hover~.b { background-color: #00f }

</style>

</head>

<body>

<div class="a">aaa</div>

<div class="b">bbb</div>

</body>