漂亮的css ul li table(表格)兼容IE8,IE9,FF21

最新推荐文章于 2024-08-23 17:35:50 发布

蝶恋花雨

最新推荐文章于 2024-08-23 17:35:50 发布

阅读量6.3k

点赞数

分类专栏： Html And Css 文章标签：漂亮的css ul li table表格兼容IE8 IE9

本文链接：https://blog.csdn.net/kongwei521/article/details/18073087

版权

Html And Css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

项目中用到一个表格，现在提取出来。在IE6下面有点问题；纯div ul li css 实现的table表格效果。带滚动条

IE8,IE9效果图：

FF效果：

IE6效果有点问题：

CSS样式：

<style type="text/css">
		body {
			font-family: "宋体";
			font-size: 9pt;
			background-color: #ffffff;
			color: #000000;
			padding:0;
		}
		ul {
			clear: both;
			padding: 0;
			list-style: none;
			/*IE6*/
			_float: left;
			_clear: none; cursor:pointer;

		}

		.content li {
			padding: 0;
			float: left;
			display: block;
			border-bottom: gray 1px solid;
			border-left: gray 1px solid;
			line-height: 25px;
			height: 25px;
			text-align: center;
			word-break: keep-all;
			/*不换行 */
			white-space: nowrap; /*不换行 */
			overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
			text-overflow: ellipsis;
		}


		.biaotou ul
		 {
			clear: both;
			list-style: none;
			/*IE6*/
			_float: left;
			_clear: none;
		}
		.biaotou li
		{
			float: left;
			display: block;
			height: auto;
			font-weight:bold;
			border-bottom: gray 1px solid;
			border-left: gray 1px solid;
			line-height: 20px;
			border-top: gray 1px solid;
			background: #CEE9A4 no-repeat;
			text-align: center;
		}
		#UserList {
			border-collapse: collapse;
			width: 979px; /*IE8,9*/
			*width: 974px; /*IE7*/
			_width: 974px; /*IE6*/
			overflow-x: scroll;
			float: left;
			scrollbar-face-color: #f5eded; /*   滚动条颜色*/
			scrollbar-highlight-color: #666; /*  //滚动条侧线颜色（左）*/
			scrollbar-3dlight-color: #999; /* //滚动条最边线颜色（左）*/
			scrollbar-darkshadow-color: #D6E7EF; /* //滚动条侧线颜色（右）*/
			scrollbar-Shadow-color: #333; /*//滚动条侧线拐角阴影颜色（右）*/
			scrollbar-arrow-color: #000; /* //上下三角形颜色*/
			scrollbar-track-color: #fafafa; /*  //滚动条底部背景色*/
		}

		.detailsinfo ul {
			clear: both;
			list-style: none;
			/*IE6*/
			_float: left;
			_clear: none; width:1530px;
		}

		.detailsinfo li {
			float: left;
			display: block;
			height: 20px;
			font-weight: bold;
			border-bottom: gray 1px solid;
			line-height: 20px;
			background: #d9e59d no-repeat;
			text-align: center;
		}
		.pinfan{
			width:250px;
			_width:230px;/*ie6*/
		}
		.boxno {
			width: 250px;
			_width: 230px;
		}
		.showinfo {
			width: 977px;

			border-right: gray 1px solid;
			_width: 937px;
		}
	</style>

HTML代码：

<div style="width:980px; margin:0 auto; ">
		<ul class="biaotou">
			<li style="width: 26px;">选择</li>
			<li style="width: 62px;">库位</li>
			<li style="width: 82px;">工厂名称</li>
			<li class="pinfan">品番</li>
			<li class="boxno">箱号</li>
			<li style="width: 69px;">箱数</li>
			<li style="width: 120px; ">入库日期</li>
			<li style="width: 80px;">跟踪号</li>
			<li style="width: 30px; border-right: gray 1px solid;">编辑</li>
		</ul>

		<!--此处开始循环 -->
		<ul class="content">
			<li style="width: 26px;"><input type="checkbox" /></li>
			<li style="width: 62px;">xxxx</li>
			<li style="width: 82px;">xxxxx</li>
			<li class="pinfan">122222</li>
			<li class="boxno">52,90</li>
			<li style="width: 69px;">2</li>
			<li style="width: 120px;">2013-07-26 13:18:31</li>
			<li style="width: 80px;">xxxx</li>
			<li style="width: 30px; border-right: gray 1px solid;"><a href="">编辑</a> </li>
		</ul>
		<ul class="content" >
			<li style="width: 26px;"><input  type="checkbox" /></li>
			<li style="width: 62px;">xxxxx</li>
			<li style="width: 82px;">xxxxx</li>
			<li class="pinfan">122222</li>
			<li class="boxno">52,90</li>
			<li style="width: 69px;">2</li>
			<li style="width: 120px; ">2013-07-26 13:18:31</li>
			<li style="width: 80px;">xxxx</li>
			<li style="width: 30px; border-right: gray 1px solid;">编辑</li>
			<li class="showinfo" style="height: auto;">
				<div id="UserList" >
					<ul class="detailsinfo" style="width: 1900px;">
						<li style="border-left:0px;width:26px;">序号</li>
						<li style="width: 28px;">客戶</li>
						<li style="width: 90px;">产品</li>
						<li style="width: 55px;">中文描述</li>
						<li style="width: 55px;">英文描述</li>
						<li style="width: 70px;">批号</li>
						<li style="width: 60px;">库位</li>
						<li style="width: 80px;">跟踪号</li>
						<li style="width: 25px;">LPN</li>
						<li style="width: 25px;">单位</li>
						<li style="width: 80px;">库存数量</li>
						<li style="width: 80px;">分配数量</li>
						<li style="width: 80px;">冻结数量</li>
						<li style="width: 80px;">可用数量</li>
						<li style="width: 80px;">体积</li>
						<li style="width: 80px;">毛重</li>
						<li style="width: 80px;">净重</li>
						<li style="width: 80px;">价值</li>
						<li style="width: 114px;">颜色</li>
						<li style="width: 114px; ">尺码</li>
						<li style="width: 65px;">入库日期</li>
						<li style="width: 114px; ">品番</li>
						<li style="width: 50px;">产品等级</li>
						<li style="width: 70px;">工厂</li>
						<li style="width: 105px;">箱号</li>
						<li style="width: 85px; ">ASNNO</li>
					</ul>
					<ul class="content" style="width: 1900px;">
						<li style="border-left:0;width:26px;">1</li>
						<li style="width: 28px;">xxxx</li>
						<li style="width:90px;">xxxx</li>
						<li style="width: 55px;">.</li>
						<li style="width: 55px;">xxxx</li>
						<li style="width: 70px;">xxxx</li>
						<li style="width: 60px;">xxxx</li>
						<li style="width: 80px;">xxxx-65</li>
						<li style="width: 25px;">*</li>
						<li style="width: 25px;">件</li>
						<li style="width: 80px;">11.00000000</li>
						<li style="width: 80px;">0.00000000</li>
						<li style="width: 80px;">0.00000000</li>
						<li style="width: 80px;">11.00000000</li>
						<li style="width: 80px;">132.00000000</li>
						<li style="width: 80px;">2222.00000000</li>
						<li style="width: 80px;">0.00000000</li>
						<li style="width: 80px;">0.00000000</li>
						<li style="width: 114px; ">2+92</li>
						<li style="width: 114px; ">L+LL+M</li>
						<li style="width: 65px;">2013/7/26</li>
						<li style="width: 114px; ">441000-A+441000-B+441000-C+441000-D</li>
						<li style="width: 50px;">半程品</li>
						<li style="width: 70px;">xxxx</li>
						<li style="width: 105px;">xxxx-(152)</li>
						<li style="width: 85px;"> xxxx  </li>
					</ul>

				</div>
			</li>
		</ul>
	</div>