当前位置：首页 → 问答吧 → 单元格TD里只要没有内容的，Table的网格线在IE6、搜狗2.2、360浏览器4.0 里, 都不显示网格线。但在IE8显示正常,。

单元格TD里只要没有内容的，Table的网格线在IE6、搜狗2.2、360浏览器4.0 里, 都不显示网格线。但在IE8显示正常,。

时间：2011-11-21

来源：互联网

单元格TD里只要没有内容的，Table的网格线在IE6、搜狗2.2、360浏览器4.0 里, 都不显示网格线。但在IE8显示正常,。
我在表格里只创建了表头，所有的TD是JS自动生成的。不知道是什么原因？？

HTML:
<div class="tScroll">
<table id="QueryTable" cellpadding="0" cellspacing="0">
<tr class="tableHead" align="left">
<th width="20"></th>
<th width="20"></th>
<th width="20"></th></th>
<th width="80">名称</th>
<th width="40"></th>
<th width="80">本线号码</th>
<th width="40">方向</th>
<th width="160">时间</th>
<th width="110">拨出号码</th>
<th width="100">拨入号码</th>
<th width="60">长度</th>
<th width="95">IP地址</th>
</tr>
</table>
</div>

CSS:
.tScroll {border: 1px #7494BF solid; background-color: #ffffff; overflow: scroll; overflow-x:hidden; height:600px; cursor: default; }
tr.tableHead { position:relative; background-color:#BFCEE7; height: 16px; text-align: center; }
#QueryTable th {height:20px; font: 11px "Verdana", "Arial"; border: #7494BF solid; border-width: 0px 1px 1px 0px; text-align:center}
#QueryTable td {height:20px; font: 11px "Verdana", "Arial"; border: #7494BF solid; border-width: 0px 1px 1px 0px; text-align:center }

作者: myLove1986 发布时间: 2011-11-21

我有测试设置 border-width: 1px 1px 1px 1px; 但是这样，一样，网格线就比较粗了，不漂亮，谁有更好的解决方法？

作者: myLove1986 发布时间: 2011-11-21

我有测试设置 border-width: 1px 1px 1px 1px; 仍然没有显示网格线，而且网格线还比较粗了，不漂亮，

谁有解决方法呀？

作者: myLove1986 发布时间: 2011-11-21

发一段完整的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>测试</title>

<style type="text/css">

</style>

</head>

<body onLoad="ConnectTerminal_Status()">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="t2">
<tr>
<td valign="top">
<div class="tScroll">
<table id="tbl_State" width="100%" cellpadding="0" cellspacing="0">
<tr class="tableHead" align="left" >
<th width="40" height="25" id="c_1">项目1</th>
<th width="50" id="c_2">项目1</th>
<th width="100" id="c_3">项目1</th>
<th width="60" id="c_4">项目1</th>
<th width="60" id="c_5">项目1</th>
<th width="60" id="c_6">项目1</th>
<th width="100" id="c_7">项目1</th>
<th width="100" id="c_8" >项目1</th>
<th width="140" id="c_9" >项目1</th>
<th width="140" id="c_10" >项目1</th>
</tr>
<tr class="td1" align="left" >
<td width="40" height="25" id="c_1">通道号</td>
<td width="50" id="c_2">内容1</td>
<td width="100" id="c_3"></td>
<td width="60" id="c_4"></td>
<td width="60" id="c_5">内容1</td>
<td width="60" id="c_6">内容1</td>
<td width="100" id="c_7">内容1</td>
<td width="100" id="c_8" >内容1</td>
<td width="140" id="c_9" >内容1</td>
<td id="c_10" >内容1</td>
</tr>
<tr class="td2" align="left" >
<td width="40" height="25" id="c_1">通道号</td>
<td width="50" id="c_2">通道号</td>
<td width="100" id="c_3">通道号</td>
<td width="60" id="c_4"></td>
<td width="60" id="c_5"></td>
<td width="60" id="c_6"></td>
<td width="100" id="c_7">通道号</td>
<td width="100" id="c_8" >通道号</td>
<td width="140" id="c_9" >通道号</td>
<td id="c_10" >通道号</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

</body>
</html>

作者: myLove1986 发布时间: 2011-11-21

要么空的td加 
要么<table style="border-collapse:collapse">
HTML code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>测试</title>

<style type="text/css">
<!--
body {font: 11px "verdana","Arial"; width:1000px; margin:auto; overflow:hidden; }  

.tScroll {border: 1px #7494BF solid; background-color: #ffffff; overflow: scroll; overflow-x:hidden; overflow-y:hidden; height:650px; cursor: default; }   
tr.tableHead { position:relative; background-color:#BFCEE7; height: 16px; text-align: center; }   
#tbl_State th {height:20px; font: 11px "Verdana", "Arial"; border: #7494BF solid; border-width: 0px 1px 1px 0px; text-align:center}
#tbl_State td {height:20px; font: 11px "Verdana", "Arial"; border: #7494BF solid; border-width: 0px 1px 1px 0px; text-align:center; }

-->
</style>

</head>

<body onLoad="ConnectTerminal_Status()">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="t2">
  <tr>
  <td valign="top">
<div class="tScroll">  
<table id="tbl_State" width="100%" cellpadding="0" cellspacing="0"  style="border-collapse:collapse">
  <tr class="tableHead" align="left" >
<th width="40" height="25" id="c_1">项目1</th>
<th width="50" id="c_2">项目1</th>
<th width="100" id="c_3">项目1</th>
<th width="60" id="c_4">项目1</th>
<th width="60" id="c_5">项目1</th>
<th width="60" id="c_6">项目1</th>
<th width="100" id="c_7">项目1</th>
<th width="100" id="c_8" >项目1</th>
<th width="140" id="c_9" >项目1</th>
<th width="140" id="c_10" >项目1</th>
  </tr>
<tr class="td1" align="left" >
<td width="40" height="25" id="c_1">通道号</td>
<td width="50" id="c_2">内容1</td>
<td width="100" id="c_3"></td>
<td width="60" id="c_4"></td>
<td width="60" id="c_5">内容1</td>
<td width="60" id="c_6">内容1</td>
<td width="100" id="c_7">内容1</td>
<td width="100" id="c_8" >内容1</td>
<td width="140" id="c_9" >内容1</td>
<td id="c_10" >内容1</td>
  </tr>
<tr class="td2" align="left" >
<td width="40" height="25" id="c_1">通道号</td>
<td width="50" id="c_2">通道号</td>
<td width="100" id="c_3">通道号</td>
<td width="60" id="c_4"></td>
<td width="60" id="c_5"></td>
<td width="60" id="c_6"></td>
<td width="100" id="c_7">通道号</td>
<td width="100" id="c_8" >通道号</td>
<td width="140" id="c_9" >通道号</td>
<td id="c_10" >通道号</td>
  </tr>
  </table>
</div>  
  </td>
  </tr>
</table>

</body>
</html>