css控制表格横向显示

html-css09

css控制表格横向显示,第1张

CSS即层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS控制表格横向显示Html代码: <div style="position:relative"><table class="t1"><tr><td>1</td></tr></table><table class="t2"><tr><td>2</td></tr></table><table class="t3"><tr><td>3</td></tr></table></div>CSS代码:<style type="text/css">.t1, .t2, .t3 {width:100pxposition:absolute}.t2 {top:0left:100px}.t3 {top:0left:200px}</style>

你好,你的意思是不是最后一个li 换行了。如果是的话,那是因为你的 li宽度写的不够,你改大点就可以了。目前是100px ,你可以改大点。

另外,你的代码可以优化很多,写CSS的目的就是为了节约代码所以加油噢。

比如。#top-nav 下面如果写ul li 的时候, 代码中就不要引用,class了。 你只要在css 中用连写就可以了。#top-nav ul {....} #top-nav ul li {,.....} 这样写,你页面中ul 就不要再调用class了。

再比如:写页面的时候先要对所有需要运用的元素进行格式化。div,ul,li,ol,li,p {margin:0padding:0} 这样写好了以后,下面CSS文件中的所有元素就不需要再写这代码了。

<style>

table tr{

background-color:#FF0000

}

#aaa{filter : progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=100,finishOpacity=50)}

#bbb{filter : progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=50,finishOpacity=0)}

</style>

</head>

<body>

<table border="0" cellpadding="0" cellspacing="0">

<div>

<tr>

<td id="aaa">111111</td>

<td id="bbb">222222</td>

</tr>

</div>

<tr>

<td>3</td>

<td>4</td>

</tr>

</table>

</body>

简单的说应该没有直接的方法能实现这个功能

只能变相实现~~ 如上方法让每个TD渐变 然后只要让颜色衔接上 看起来就像

每个TR颜色渐变了~~