日期:2014-05-17  浏览次数:20983 次

如何设置单元格上下间距和左右间距为不同值?
我在使用ASP的datalist制作单线表格的时候遇到一个单元格间距设置问题。
一般情况下,如果我们制作表格使用这个格式

HTML code
<table border="1" cellspacing="0" cellpadding="0">...</table>

制作出的表格边框总是粗粗的双线。如果要制造单线的边框一般是这么写:
HTML code
<table border="0" cellspacing="1" cellpadding="0">...</table>

然后把单元格背景色和表格背景色设置的不一样,就可以了。
可是在使用datalist显示数据时,它总是被解析成一个带有单元格的表格,如果设置它的cellspacing="1"那么生成的数据里就会自动上下隔开一条线,此时再插入</td>就会编程上下2px的粗线,左右1px的细线。
即这样写:
[code=HTML]
<asp:DataList ID="DLSOList" runat="server" cellspacing="1" CellPadding ="0">
  <ItemTemplate>
  <tr style="background-color:#99FFCC;font-family:宋体;font-size:14px;height:40px">
  <td style="text-align:left;width:100px">
  <%#DataBinder.Eval(Container.DataItem,"ContractBill") %>
  </td>
  <td style="text-align:right;width:70px">
  <%#DataBinder.Eval(Container.DataItem,"BillDate") %>
  </td> 
  <ItemTemplate>
</asp:DataList>
[code=HTML]
就会出现横线比竖线粗的结果,因为<ItemTemplate>被解析成了一个单元格,再往里边套单元格时就成了上下2px粗了,但左右只有1px。
有人说可以套一个表格
[code=HTML]
<asp:DataList ID="DLSOList" runat="server" cellspacing="0" CellPadding ="0">
  <ItemTemplate>
  <table border="0" cellspacing="1" cellpadding="0" style="background-color:#0000FF"〉
  <tr style="background-color:#99FFCC;font-family:宋体;font-size:14px;height:40px">
  <td style="text-align:left;width:100px">
  <%#DataBinder.Eval(Container.DataItem,"ContractBill") %>
  </td>
  <td style="text-align:right;width:70px">
  <%#DataBinder.Eval(Container.DataItem,"BillDate") %>
  </td>
  <table> 
  <ItemTemplate>
</asp:DataList>
[code=HTML]
这样写的结果还是表格横线比竖线粗。
这个问题简单点讲就是我想找到一种方法能把单元格的上下间距设置的和左右间距不同,cellspacing的值总是设置所有边距为一个值。

------解决方案--------------------
table不可以
div可以
------解决方案--------------------
顶一个
------解决方案--------------------
如果要边框 设置td的border
------解决方案--------------------
border可以分开设 上右下左
如果要1px 则需要设 td的右边框及下边框 和 table的左边框和上边框
具体要实现什么效果,还需要你自己测试一下。
------解决方案--------------------
<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">...</table>
合并边框就可以制造单线的边框
------解决方案--------------------
应该是<table>里的padding值,padding-left,padding-right,padding-top,padding-bottom;
------解决方案--------------------
顶一个~