无法回避的横向滚动条

J2002 2008-08-04 05:32:59

项目要求一个div(overflow-x: scroll;overflow-y: scroll;)内含有一个table(width:100%)
也就是希望
当表格实际宽度大于div宽度时需要出现横向滚动条，
当表格实际宽度小于div宽度时，表格横向充满div，但不需要横向滚动条。
并且div始终保持一个垂直滚动条。

问题是，表格实际宽度小于div宽度时，依然出现横向滚动条，原因是ie显示时计算出来的表格宽度=div的宽度，准确的宽度应该=div的宽度-垂直滚动条的宽度。

大家看看有没有办法解决。

代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.yesScroll {
width: 100%;
background-color: #666666;
overflow-x: scroll;
overflow-y: scroll;
padding: 0px;
}
.tblDetail {
background-color: white;
border-width: 1px;
border-color: snow;
border-style: solid;
border-collapse: collapse;
margin: 1px;
float: left;
}
.thCenter {
font-size: 12px;
font-weight: normal;
color: #113388;
background-color: #d4e3ff;
text-align: center;
vertical-align: middle;
border-collapse: collapse;
border-right-width: 1px;
border-bottom-width: 3px;
border-right-color: #a1a1a1;
border-bottom-color: #a1a1a1;
border-right-style: solid;
border-bottom-style: solid;
height: 20px;
padding-left: 4px;
padding-right: 4px;
white-space:nowrap;
}
.trOdd {
background-color:#ffffff;
}
.trEven {
background-color:#f0ffff;
}
.tdLeft {
font-size: 12px;
text-align: left;
vertical-align: middle;
margin-left: 2px;
margin-right: 2px;
border-collapse: collapse;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-color: #a1a1a1;
border-bottom-color: #a1a1a1;
border-right-style: solid;
border-bottom-style: solid;
height: 20px;
padding-left: 4px;
padding-right: 4px;
white-space:nowrap;
color: #000000;
}
</style>
</head>
<body>
<table style="width:770px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="master" class="yesScroll" style="width:770px;height:225px">
<table id="myTable" cellspacing="0" cellpadding="0" class="tblDetail" style="width:100%">
<thead>
<tr>
<th nowrap class="thCenter">AAA</th>
<th nowrap class="thCenter">BBB</th>
</tr>
</thead>
<tbody>
<tr onclick="lineSelect(this);" class="trOdd">
<td nowrap class="tdLeft">PDF</td>
<td nowrap class="tdLeft">111</td>
</tr>
<tr onclick="lineSelect(this);" class="trEven">
<td nowrap class="tdLeft">CSV</td>
<td nowrap class="tdLeft">222</td>
</tr>
<tr onclick="lineSelect(this);" class="trOdd">
<td nowrap class="tdLeft">TXT</td>
<td nowrap class="tdLeft">333</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>

...全文

236 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

shaovey 2008-08-05

打赏
举报

table在div里面，还使用100%继承其宽度，又何来“表格实际宽度小于div”呢？

cftea 2008-08-05

打赏
举报

我想了个办法，就是利用 JavaScript 来实现兼容。
看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 

  <head> 

    <style type="text/css"> 

.yesScroll { 

  width: 100%; 

  background-color: #666666; 

  overflow-x: auto; 

  overflow-y: scroll; 

  padding: 0px; 

} 

.tblDetail { 

  background-color: white; 

  border-width: 1px; 

  border-color: snow; 

  border-style: solid; 

  border-collapse: collapse; 

  margin: 0px; 

  float: left; 

} 

.thCenter { 

  font-size: 12px; 

  font-weight: normal; 

  color: #113388; 

  background-color: #d4e3ff; 

  text-align: center; 

  vertical-align: middle; 

  border-collapse: collapse; 

  border-right-width: 1px; 

  border-bottom-width: 3px; 

  border-right-color: #a1a1a1; 

  border-bottom-color: #a1a1a1; 

  border-right-style: solid; 

  border-bottom-style: solid; 

  height: 20px; 

  padding-left: 4px; 

  padding-right: 4px; 

  white-space:nowrap; 

} 

.trOdd { 

background-color:#ffffff; 

} 

.trEven { 

background-color:#f0ffff; 

} 

.tdLeft { 

  font-size: 12px; 

  text-align: left; 

  vertical-align: middle; 

  margin-left: 2px; 

  margin-right: 2px; 

  border-collapse: collapse; 

  border-right-width: 1px; 

  border-bottom-width: 1px; 

  border-right-color: #a1a1a1; 

  border-bottom-color: #a1a1a1; 

  border-right-style: solid; 

  border-bottom-style: solid; 

  height: 20px; 

  padding-left: 4px; 

  padding-right: 4px; 

  white-space:nowrap; 

  color: #000000; 

} 

    </style> 

  </head> 

<body> 

  <table style="width:770px" border="0" cellspacing="0" cellpadding="0"> 

    <tr> 

      <td> 

        <div id="master" class="yesScroll" style="width:770px;height:225px"> 

<table id="myTable" cellspacing="0" cellpadding="0" class="tblDetail" style="width:100%;"> 

<thead> 

<tr> 

<th nowrap class="thCenter">AAA </th> 

<th nowrap class="thCenter">BBB </th> 

</tr> 

</thead> 

<tbody> 

<tr onclick="lineSelect(this);" class="trOdd"> 

<td nowrap class="tdLeft">PDF </td> 

<td nowrap class="tdLeft">111 </td> 

</tr> 

<tr onclick="lineSelect(this);" class="trEven"> 

<td nowrap class="tdLeft">CSV </td> 

<td nowrap class="tdLeft">222 </td> 

</tr> 

<tr onclick="lineSelect(this);" class="trOdd"> 

<td nowrap class="tdLeft">TXT </td> 

<td nowrap class="tdLeft">333 </td> 

</tr> 

</tbody> 

</table> 

        </div> 

      </td> 

    </tr> 

  </table> 

<script type="text/javascript">

var myTable = document.getElementById("myTable");

if (myTable.offsetParent.clientWidth < myTable.offsetParent.offsetWidth)

{

    //IE 的 clientWidth 不包括边框，FF 包括。

    myTable.style.width = myTable.offsetParent.clientWidth + "px";

}

</script>

</body> 

</html>