带横向滚动条的表格

 --------------------------------------可单击变换表格内容----------------------------------------

<!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>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></FCK:meta>
<head>
<style>
body {background-color: #F0F0F0 ;  font: 11px "verdana","Arial"; margin-left:auto; margin-right:auto; }
.tScroll {border: 1px #7494BF solid; background-color: #ffffff; overflow:scroll;height:200px; width:600px;cursor: default; }
tr.tableHead { position:relative; background-color:#BFCEE7; height: 16px; text-align: center; }
th, td { font: 11px "Verdana", "Arial"; border: #7494BF solid; border-width: 0px 1px 1px 0px; }
table{width:900px; }
</style>
<script>
var   i=0;
var tes;
function   aa(aa,ttd)
{
if(i==0)
aa.innerHTML= " <select   οnchange=bb(this.options[this.selectedIndex].value)><option   value= ''>   <option   value='*'>*</option> <option   value='#'>#</option> <select> "
tes=ttd;
i=1;

}
function   bb(s)
{
document.getElementById(tes).innerHTML=s;
i=0;

}

</script>
</head>
<body>
<div class="tScroll">
  <table border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
    <col width="111" />
    <col width="36" />
    <col width="52" span="4" />
    <col width="36" span="3" />
    <col width="52" span="8" />
    <col width="36" />
    <col width="52" span="2" />
    <tr height="19" style="width:50px">
      <td height="19" width="101"><div align="center">体系文件</div></td>
      <td align="right" width="21"><div align="center">4.1</div></td>
      <td width="48"><div align="center">4.2.1</div></td>
      <td width="48"><div align="center">4.2.2</div></td>
      <td width="48"><div align="center">4.2.3</div></td>
      <td width="48"><div align="center">4.2.4</div></td>
      <td align="right" width="32"><div align="center">5.1</div></td>
      <td align="right" width="32"><div align="center">5.2</div></td>
      <td align="right" width="32"><div align="center">5.3</div></td>
      <td width="48"><div align="center">5.4.1</div></td>
      <td width="48"><div align="center">5.4.2</div></td>
      <td width="48"><div align="center">5.5.1</div></td>
      <td width="48"><div align="center">5.5.2</div></td>
      <td width="48"><div align="center">5.5.3</div></td>
      <td width="48"><div align="center">5.6.1</div></td>
      <td width="48"><div align="center">5.6.2</div></td>
      <td width="48"><div align="center">5.6.3</div></td>
      <td align="right" width="32"><div align="center">6.1</div></td>
      <td width="48"><div align="center">6.2.1</div></td>
      <td width="59"><div align="center">6.2.2</div></td>
    </tr>
    <tr height="19">
      <td height="19"><div align="center">记录控制系统</div></td>
      <td id=td1   οnclick= "aa(this,'td1'); "> </td>
      <td id=td2   οnclick= "aa(this,'td2'); "> </td>
      <td id=td3   οnclick= "aa(this,'td3'); "> </td>
      <td id=td4   οnclick= "aa(this,'td4'); "> </td>
      <td id=td5   οnclick= "aa(this,'td5'); "> </td>
      <td id=td6   οnclick= "aa(this,'td6'); "> </td>
      <td id=td7   οnclick= "aa(this,'td7'); "> </td>
      <td id=td8   οnclick= "aa(this,'td8'); "> </td>
      <td id=td9   οnclick= "aa(this,'td9'); "> </td>
      <td id=td10   οnclick= "aa(this,'td10'); "> </td>
      <td id=td11  οnclick= "aa(this,'td11'); "> </td>
      <td id=td12   οnclick= "aa(this,'td12'); "> </td>
      <td id=td13   οnclick= "aa(this,'td13'); "> </td>
      <td id=td14   οnclick= "aa(this,'td14'); "> </td>
      <td id=td15   οnclick= "aa(this,'td15'); "> </td>
      <td id=td16   οnclick= "aa(this,'td16'); "> </td>
      <td id=td17   οnclick= "aa(this,'td17'); "> </td>
      <td id=td18   οnclick= "aa(this,'td18'); "> </td>
      <td id=td19   οnclick= "aa(this,'td19'); "> </td>
    </tr>
    <tr height="19">
      <td height="19"><div align="center">管理评审系统</div></td>
      <td id=td21   οnclick= "aa(this,'td21'); "> </td>
      <td id=td22   οnclick= "aa(this,'td22'); "> </td>
      <td id=td23   οnclick= "aa(this,'td23'); "> </td>
      <td id=td24   οnclick= "aa(this,'td24'); "> </td>
      <td id=td25   οnclick= "aa(this,'td25'); "> </td>
      <td id=td26   οnclick= "aa(this,'td26'); "> </td>
      <td id=td27   οnclick= "aa(this,'td27'); "> </td>
      <td id=td28   οnclick= "aa(this,'td28'); "> </td>
      <td id=td29   οnclick= "aa(this,'td29'); "> </td>
      <td id=td30   οnclick= "aa(this,'td30'); "> </td>
      <td id=td31   οnclick= "aa(this,'td31'); "> </td>
      <td id=td32   οnclick= "aa(this,'td32'); "> </td>
      <td id=td33   οnclick= "aa(this,'td33'); "> </td>
      <td id=td34   οnclick= "aa(this,'td34'); "> </td>
      <td id=td35   οnclick= "aa(this,'td35'); "> </td>
      <td id=td36   οnclick= "aa(this,'td36'); "> </td>
      <td id=td37   οnclick= "aa(this,'td37'); "> </td>
      <td id=td38   οnclick= "aa(this,'td38'); "> </td>
      <td id=td39   οnclick= "aa(this,'td39'); "> </td>
    </tr>
    <tr height="19">
      <td height="19"><div align="center">培训管理系统</div></td>
      <td id=td41   οnclick= "aa(this,'td41'); "> </td>
      <td id=td42   οnclick= "aa(this,'td42'); "> </td>
      <td id=td43   οnclick= "aa(this,'td43'); "> </td>
      <td id=td44   οnclick= "aa(this,'td44'); "> </td>
      <td id=td45   οnclick= "aa(this,'td45'); "> </td>
      <td id=td46   οnclick= "aa(this,'td46'); "> </td>
      <td id=td47   οnclick= "aa(this,'td47'); "> </td>
      <td id=td48   οnclick= "aa(this,'td48'); "> </td>
      <td id=td49   οnclick= "aa(this,'td49'); "> </td>
      <td id=td50   οnclick= "aa(this,'td50'); "> </td>
      <td id=td51   οnclick= "aa(this,'td51'); "> </td>
      <td id=td52   οnclick= "aa(this,'td52'); "> </td>
      <td id=td53   οnclick= "aa(this,'td53'); "> </td>
      <td id=td54   οnclick= "aa(this,'td54'); "> </td>
      <td id=td55   οnclick= "aa(this,'td55'); "> </td>
      <td id=td56   οnclick= "aa(this,'td56'); "> </td>
      <td id=td57   οnclick= "aa(this,'td57'); "> </td>
      <td id=td58   οnclick= "aa(this,'td58'); "> </td>
      <td id=td59   οnclick= "aa(this,'td59'); "> </td>
    </tr>
    <tr height="19">
      <td height="19"><div align="center">内部审核系统</div></td>
      <td id=td61   οnclick= "aa(this,'td61'); "> </td>
      <td id=td62   οnclick= "aa(this,'td62'); "> </td>
      <td id=td63   οnclick= "aa(this,'td63'); "> </td>
      <td id=td64   οnclick= "aa(this,'td64'); "> </td>
      <td id=td65   οnclick= "aa(this,'td65'); "> </td>
      <td id=td66   οnclick= "aa(this,'td66'); "> </td>
      <td id=td67   οnclick= "aa(this,'td67'); "> </td>
      <td id=td68   οnclick= "aa(this,'td68'); "> </td>
      <td id=td69   οnclick= "aa(this,'td69'); "> </td>
      <td id=td70   οnclick= "aa(this,'td70'); "> </td>
      <td id=td71   οnclick= "aa(this,'td71'); "> </td>
      <td id=td72   οnclick= "aa(this,'td72'); "> </td>
      <td id=td73   οnclick= "aa(this,'td73'); "> </td>
      <td id=td74   οnclick= "aa(this,'td74'); "> </td>
      <td id=td75   οnclick= "aa(this,'td75'); "> </td>
      <td id=td76   οnclick= "aa(this,'td76'); "> </td>
      <td id=td77   οnclick= "aa(this,'td77'); "> </td>
      <td id=td78   οnclick= "aa(this,'td78'); "> </td>
      <td id=td79   οnclick= "aa(this,'td79'); "> </td>
    </tr>
    <tr height="19">
      <td height="19"><div align="center">采购控制系统</div></td>
      <td id=td81   οnclick= "aa(this,'td81'); "> </td>
      <td id=td82   οnclick= "aa(this,'td82'); "> </td>
      <td id=td83   οnclick= "aa(this,'td83'); "> </td>
      <td id=td84   οnclick= "aa(this,'td84'); "> </td>
      <td id=td85   οnclick= "aa(this,'td85'); "> </td>
      <td id=td86   οnclick= "aa(this,'td86'); "> </td>
      <td id=td87   οnclick= "aa(this,'td87'); "> </td>
      <td id=td88   οnclick= "aa(this,'td88'); "> </td>
      <td id=td89   οnclick= "aa(this,'td89'); "> </td>
      <td id=td90   οnclick= "aa(this,'td90'); "> </td>
      <td id=td91   οnclick= "aa(this,'td91'); "> </td>
      <td id=td92   οnclick= "aa(this,'td92'); "> </td>
      <td id=td93   οnclick= "aa(this,'td93'); "> </td>
      <td id=td94   οnclick= "aa(this,'td94'); "> </td>
      <td id=td95   οnclick= "aa(this,'td95'); "> </td>
      <td id=td96   οnclick= "aa(this,'td96'); "> </td>
      <td id=td97   οnclick= "aa(this,'td97'); "> </td>
      <td id=td98   οnclick= "aa(this,'td98'); "> </td>
      <td id=td99   οnclick= "aa(this,'td99'); "> </td>
    </tr>
  </table>
</div>
</body>
</html>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
表格的内容过宽超出容器时,可以通过添加横向滚动条来实现内容的滚动。 要手动添加表格横向滚动条,可以按照以下步骤进行: 1. 将表格包裹在一个容器元素内,例如一个 div 元素。 2. 为容器元素设置宽度和 overflow-x: auto; 属性。这将使得容器元素出现横向滚动条,并且当表格宽度超过容器宽度时,表格会在容器内滚动。 3. 为表格设置一个固定的宽度,这样表格就不会随着内容的变化而改变宽度了。 下面是一个示例代码: HTML: ```html <div class="table-container"> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> <th>Header 5</th> </tr> </thead> <tbody> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> <td>Row 1, Column 4</td> <td>Row 1, Column 5</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> <td>Row 2, Column 4</td> <td>Row 2, Column 5</td> </tr> <!-- more rows --> </tbody> </table> </div> ``` CSS: ```css .table-container { width: 100%; overflow-x: auto; } table { width: 1000px; /* 固定宽度 */ } ``` 在上面的示例中,我们将表格放在一个名为 .table-container 的 div 元素内,并为该元素设置了宽度和 overflow-x: auto; 属性。表格的宽度被设置为 1000px,这样表格就不会随着内容的变化而改变宽度了。当表格的宽度超过容器宽度时,容器元素会出现横向滚动条,用户就可以通过滚动条来滚动表格了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值