控制DIV中LI的宽度

现想做个表格，因为数据太多，而TABLE的速度又太慢，代码太多为了速度和代码减少，想用DIV来做表格<div>       ---------表头，固定一行内容
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
  </ul>
</div>
<div>       -------------数据库输出
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
  </ul>
</div>
<div>       -------------数据库输出
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
  </ul>
</div>表格的数据大概就是这样的，也许会变，现想大家帮忙，用CSS或JS来管理和控制LI的宽当然可以修改代码，并希望代码越少越好。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

是的，而且每个LI的宽不同，如果用TD，只能定义WIDTH了，太费代码，每一行都要写。
1000+条数据，每一行都一个TR，要读取完整个TABLE才显示，能不慢吗如果一行一个TABLE，那么代码有点太多了。
不用的，就像TD那样，固定LI的宽度，只不过不能像TD那样
<td width=100></td>
<td width=50></td>
每一行都写这些，想用个JS来直接定义，LI的宽，LI的列也可以增加也可以减少。用JS来统一管理，
另外，这一页中可能会要求LI的宽度不同，JS定义的时候也希望能考虑进去
ul{white-space:nowrap}
li{ display:inline}
这样就能自动适应宽度而且超出屏幕宽度时滚动而不换行
<tr>
<td width=25%></td>
<td width=25%></td>
<td width=25%></td>
<td width=25%></td>
</tr>变为DIV+CSS+JS
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>不知这样大家能否看懂
做网页，必须有大局观。
没必要盯着某一行或每一行LI的宽度。关键看你整个UL的宽度。
如果所有UL宽度在大体视觉上看是相同的，就只要在CSS里用一句设置UL的宽度即可。
如果每个UL宽度确实必须不同，就单独给每个UL一个CLASS，然后设置它们。
一行有10个LI
每个LI的宽度都不同的，就像TABLE一样的显示，整整齐齐。
而TD，定义最开始的TD，下面的会对齐，而LI的不行。
而且为了省代码，不想每个LI都定义个CLASS
那你给每个LI设定宽度。然后每次循环都是这十个LI不就可以了么？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>liCSS.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div li {
width: 200px;
height: 25px;
/*border: 1px solid red;*/
}
</style>
  </head>

  <body bgcolor="white">
    <div> ---------表头，固定一行内容
  <ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
  <li>h</li>
  </ul>
</div>
<div> -------------数据库输出
  <ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
  <li>h</li>
  </ul>
</div>
<div> -------------数据库输出
  <ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
  <li>h</li>
  </ul>
</div>
  </body>
</html>
每个LI都加个CLASS，这个方法我知道，但是，但浪费代码了楼上的，每个LI不是一样的宽度，要看内容大小，我自己来调整
那你就设置个UL的宽度。但是LI的宽度就不要设定了。让他自己伸缩得了。但是你这样的话。整个布局都会乱掉的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>liCSS.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        div li {
            width: auto;
            height: 25px;
            /*border: 1px solid red;*/
        }
    </style>
  </head>

  <body bgcolor="white">
    <div> ---------表头，固定一行内容
      <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
      <li>f</li>
      <li>g</li>
      <li>h</li>
      </ul>
    </div>
    <div> -------------数据库输出
      <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
      <li>f</li>
      <li>g</li>
      <li>h</li>
      </ul>
    </div>
    <div> -------------数据库输出
      <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
      <li>f</li>
      <li>g</li>
      <li>h</li>
      </ul>
    </div>
  </body>
</html>
感觉实际应用意义不是很大。
如果数据量庞大，用div+css一样很耗费资源。
应该从进行分页或者AJAX的角度入手。
不过给出一个JS的代码，作为参考。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟table</title>
<style type="text/css">
.simtable { float:left; border:#999 1px solid; padding:0px 0px 1px 1px;}
.simtable ul,.simtable li{margin:0px; padding:0px; display:block; list-style:none; }
.simtable ul{overflow:hidden;height:33px;}
.simtable li{float:left; border:1px solid #999; margin:1px 1px 0px 0px; height:30px; text-align:center; line-height:30px; vertical-align:middle;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function(){
var t1 = new Date();

var simtable = $('#simtable');

//列样式：
var tableCellStyles = [
{width:'40px'},
{width:'60px'},
{width:'80px'},
{width:'100px'},
{width:'120px',backgroundColor:'#FEE'},
{width:'100px'},
{width:'60px'},
{width:'60px',backgroundColor:'#CCF'}
];

//设置各列样式：
$.each(tableCellStyles,function(index,val){
simtable.find('ul li:nth-child('+(index+1)+')').css(val);
}); //设置首行样式：
simtable.find('ul:first li').css({fontWeight:'bold',backgroundColor:'#9CF'}); //设置ul宽度自适应
simtable.find('ul').each(function(){
var width = 0;
$(this).find('li').each(function(){
width+=($(this).width()+3);//边框占2个像素，margin占1个像素
});
$(this).width(width);
});

var t2 = new Date();
alert('耗时： '+(t2-t1)+'毫秒');
});
/*]]>*/
</script>
</head>
<body>
<div id="simtable" class="simtable">
<ul>
     <li>th1</li>
        <li>th2</li>
        <li>th3</li>
        <li>th4</li>
        <li>th5</li>
        <li>th6</li>
        <li>th7</li>
        <li>th8</li>
    </ul>
    <ul>
     <li>td1</li>
        <li>td2</li>
        <li>td3</li>
        <li>td4</li>
        <li>td5</li>
        <li>td6</li>
        <li>td7</li>
        <li>td8</li>
    </ul>
<ul>
     <li>td1</li>
        <li>td2</li>
        <li>td3</li>
        <li>td4</li>
        <li>td5</li>
        <li>td6</li>
        <li>td7</li>
        <li>td8</li>
    </ul>
    <ul>
     <li>td1</li>
        <li>td2</li>
        <li>td3</li>
        <li>td4</li>
        <li>td5</li>
        <li>td6</li>
        <li>td7</li>
        <li>td8</li>
    </ul>
</div>
</body>
</html>
估计还是用TABLE吧
不然你格式很难对齐性能有问题就考虑分页和缓存数据吧