css怎么控制table单双行

html-css09

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>

odd代表奇数,even是偶数。

假设您的选择器是li的话,那么写法如下:

li:nth-child(odd) {

color: blue

}

这样您奇数行的li标签文字颜色就是蓝色的了。

overflow: hidden

text-overflow: ellipsis// text-overflow css3的属性,当文本溢出时,显示省略号

display: -webkit-box

-webkit-line-clamp: 2// 设置两行文字溢出

-webkit-box-orient: vertical

overflow:hidden

text-overflow:ellipsis