明细表多列展示

先展示一下，抛砖引玉。我最开始不懂html和css这些，只能用excel模板，后来发现html模板做出来漂亮得多。
这个问题困扰了我很久，后来下定决心把html、css拿来学了一遍，终于有一天开窍了，在学到div的边框线时，突然发现表格也不是完全是我们看到的那样，用div也能做表格，每一个“单元格”就是一个div,每一条记录放在一个大的div中，再结合div的float，不是就可以让它多列显示了吗？这里最关键的是设置每一个div的哪些边框线需要显示出来，哪些不需要显示，同时掌握好div的宽度，只好多试几次就搞定了。我这里是设计的两列，其实更多列是一个道理，掌握好div的宽度就行了。
下面把我这个设计的源码放上来，里面很多名字起得随意，不要见笑，还有，学得不深，水平有限，希望大家提提改进意见。

<style type="text/css">.duanluo{
       width:720px;
       height:20px;
       margin:0 auto;
   }
   .waikuang{
       width:720px;
       height:860px;
       float:none;
       border-style:solid;
       border-width:0px;
   }
   .firstheader{
       width:658px;
       height:24px;
       margin-left:48px;
       float:ieft;
       border-style:solid;
       border-width:0px;
   }
   .firstheader_1{
       width:329px;
       height:24px;
       margin:0px;
       padding-top:5px;

       float:left;
       border-style:solid;
       border-width:0px 0px 0px 0px;
       text-align:left;
       font-size:14px;

   }
   .firstheader_2{
       width:329px;
       height:24px;
       margin:0px;
       padding-top:5px;

       float:left;
       border-style:solid;
       border-width:0px 0px 0px 0px;
       text-align:right;
       font-size:14px;

   }
   .biaoge_top{
       width:658px;
       height:58px;
       margin-left:30px;
       float:left;
       border-style:solid;
       border-width:0px;
   }
   .biaoge_top_1{
       width:108px;
       height:24px;
       margin:0px;
       padding-top:5px;

       float:left;
       border-style:solid;
       border-width:0px 0px 0px 0px;
       text-align:center;
       font-size:14px;

   }
   .biaogediv{
       width:313px;
       margin-left:30px;
       float:left;
       border-style:solid;
       border-width:1px;
   }
   .biaogediv2{
       width:313px;
       margin-left:30px;
       float:left;
       border-style:solid;
       border-width:0px 1px 1px 1px;
   }
   .leftdiv{
       width:130px;
       height:20px;
       margin:0px;
       padding-top:5px;

       float:left;
       border-style:solid;
       border-width:0px 1px 0px 0px;
       text-align:center;
       font-size:14px;

   }
   .centerdiv{
       width:120px;
       height:20px;
       margin:0px;
       padding-top:5px;
       float:left;
       border-style:solid;
       border-width:0px 1px 0px 0px;
       text-align:center;
       font-size:14px;
   }
   .centerdiv2{
       width:50px;
       height:20px;
       margin:0px;
       padding-top:5px;
       float:left;
       border-style:solid;
       border-width:0px 1px 0px 0px;
       text-align:center;
       font-size:14px;
   }
   .rightdiv{
       width:60px;
       height:20px;
       margin:0px;
       padding-top:5px;
       float:left;
       border-style:solid;
       border-width:0px 0px 0px 0px;
       text-align:center;
       font-size:14px;
   }
</style>
<div class="firstheader">&nbsp;</div>

<div width="720">
<h1 style="text-align: center;"><span>样品称量原始记录表</span></h1>

<div class="firstheader">
<div class="firstheader_1">&nbsp;</div>

<div class="firstheader_2">编号：LNAJ/JC-CX19-06</div>
</div>

<div class="waikuang">
<div class="firstheader">
<div class="firstheader_1">任务通知单号：$MF(任务通知单号)$</div>

<div class="firstheader_2">&nbsp;</div>
</div>

<div class="biaoge_top">
<div class="biaoge_top_1">仪器名称：</div>

<div class="biaoge_top_1">$MF(设备名称)$</div>

<div class="biaoge_top_1">仪器编号：</div>

<div class="biaoge_top_1">$MF(设备编号)$</div>

<div class="biaoge_top_1">称样时间：</div>

<div class="biaoge_top_1">$MF(称样时间)$</div>

<div class="biaoge_top_1">温度/℃：</div>

<div class="biaoge_top_1">$MF(温度)$</div>

<div class="biaoge_top_1">湿度/％：</div>

<div class="biaoge_top_1">$MF(湿度)$</div>

<div class="biaoge_top_1">称样人：</div>

<div class="biaoge_top_1">&nbsp;</div>
</div>

<div class="biaogediv">
<div class="leftdiv">样品编号</div>

<div class="centerdiv">样品名称</div>

<div class="rightdiv">重量(克)</div>
</div>

<div class="biaogediv">
<div class="leftdiv">样品编号</div>

<div class="centerdiv">样品名称</div>

<div class="rightdiv">重量(克)</div>
</div>

<div class="biaogediv2 mfrepeat" spry:repeat="$MF(称量明细)$">
<div class="leftdiv">$MF(称量明细/样品编号_文本)$</div>

<div class="centerdiv">$MF(称量明细/样品名称)$</div>

<div class="rightdiv">&nbsp;</div>
</div>
</div>
</div>

<div style="text-align: center;">第#MF{PAGENO()}#页</div>