可变Table宽度

来源:转载

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<style type="text/css">
body {
font-family: "arial", "helvetica", "sans-serif", "";
font-size: 9pt;
margin: 0px;
scrollbar-face-color:#efefe7;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color:#a5a5a5;
scrollbar-darkshadow-color:#a5a5a5;
scrollbar-shadow-color:#d6d6ce;
scrollbar-arrow-color:#003184;
scrollbar-track-color:#deded6;
}
table {
font-family: "arial", "helvetica", "sans-serif","";
font-size: 9pt;
line-height: 150%;
color: #000000;
}
.display-tb2
{
border-right: #808080 1px solid;
border-top: #808080 1px solid;
border-left: #808080 1px solid;
border-bottom: #808080 1px solid;
border:0;
cellpadding:2;
cellspacing:0;
margin-top:2px;
border-collapse:collapse;
}
div.tableContainer
{
overflow-x:auto;
width:760px;
dyn-behavior:expression(
onscroll == null?
(onscroll = function(){
if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return;
var oGridBody = document.getElementById("order_GridBody");
oGridBody.style.width = parseInt(event.srcElement.clientWidth) + event.srcElement.scrollLeft + "px";
event.srcElement.oldScroll == event.srcElement.scrollLeft;
}):true,
onmousedown == null?
(onmousedown = function(){
if(self.currentTH != null) return;
var obj = document.elementFromPoint(event.x,event.y);
var objL = document.elementFromPoint(event.x - 1,event.y);

if(obj.tagName.toLowerCase() == "th")
{

if(objL.tagName.toLowerCase() == "th")
{
obj = objL;
}
if(obj.className == "fixed") return;
self.currentX = event.x;
self.currentTH = obj.childNodes[0];
self.currentTH.setCapture();
}
}):true,
onmouseup == null?
(onmouseup = function(){
if(self.currentTH != null)
{
self.currentTH.releaseCapture();
self.currentTH = null;
}
}):true,
onmousemove == null?
(onmousemove = function(){
if(self.currentTH != null)
{
var width = Math.round(parseInt(self.currentTH.clientWidth) + event.x - self.currentX);
if(width < 0) width = 0;
var dt = parseInt(self.currentTH.style.width) - width;
self.currentTH.style.width = width;
__resizeCell(self.currentTH.columnIndex,self.currentTH.style.width);
self.currentX = event.x;
}
}):true,
self.__resizeCell == null?
(self.__resizeCell = function(idx, width){
var cells = document.getElementById("order_GridBody_Cells");
var rows = cells.childNodes;
var i = 0;
for (var i = 0; i < rows.length; i++)
{
var cell = rows[i].childNodes[idx].childNodes[0];
var resetPattern = /style=[^/s/t/n]+/;
cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" +width + "'");
}
}):true
)
}
div.bodyContainer
{
height:400px;
width:760px;
overflow-x:hidden;
overflow-y:auto;
}
div.gridCell_standard
{
width:100px;
overflow:hidden;
nw:expression(this.noWrap=true);
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
cursor:default;
}
div.gridCell_narrow
{
width:30px;
overflow:hidden;
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
nw:expression(this.noWrap=true);
cursor:default;
}
th
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:col-resize;
dyn-behavior:expression(
ondblclick == null?
(ondblclick = function()
{
var src = event.srcElement;
if(event.srcElement.tagName.toLowerCase()!="div")
{
src = src.childNodes[0];
}
src.style.width = "";
__resizeCell(src.columnIndex,src.clientWidth);
}):true
)
}
th.fixed
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:default;
}
tr.odd
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 0px solid;
border-left: #a4a6a4 0px solid;
border-bottom: #a4a6a4 1px solid;
noWrap;
}
tr.even
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 0px solid;
border-left: #a4a6a4 0px solid;
border-bottom: #a4a6a4 1px solid;
}
td.odd_even
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
noWrap;
}
td.select-cell
{
border-right: #a4a6a4 1px solid;
border-top: #a4a6a4 1px solid;
border-left: #a4a6a4 1px solid;
border-bottom: #a4a6a4 1px solid;
}
</style>

<body bgcolor="F6F6F6">

<div >
<!--动态表格-->
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<th ><div columnIndex="0" >选择</div></th>
<th><div columnIndex="1" >订单编号</div></th>
<th><div columnIndex="2" >订货日期</div></th>
<th><div columnIndex="3" >订货单位</div></th>
<th><div columnIndex="4" >订单类别</div></th>
<th><div columnIndex="5" >产品类别</div></th>
<th><div columnIndex="6" >版本号</div></th>
<th><div columnIndex="7" >订货金额</div></th>
<th><div columnIndex="8" >订单状态</div></th>
</thead>
</table>
</td>
</tr>
<!--<tfoot> 共3页 </tfoot>-->
<tbody>
<tr >
<td colspan="9">
<div >
<table cellpadding="0" cellspacing="0" border="0">
<tbody >
<tr >
<td width="30px" >
<div ><input type="checkbox" value="2" /></div></td>
<td ><div >DJPH001</div></td>
<td ><div >2005-02-02</div></td>
<td ><div >19</div></td>
<td ><div >直销</div></td>
<td ><div >KIS</div></td>
<td ><div >5</div></td>
<td ><div >12.0000</div></td>
<td ><div >已取消</div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="3" /></div> </td>
<td ><div >DJPH001</div></td>
<td ><div >2005-02-02</div></td>
<td ><div >19</div></td>
<td ><div >购销</div></td>
<td ><div >KIS</div></td>
<td ><div >5</div></td>
<td ><div >21.0000</div></td>
<td ><div > </div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="4" /></div> </td>
<td ><div >DJPH889</div></td>
<td ><div >2005-02-02</div></td>
<td ><div >0</div></td>
<td ><div >购销</div></td>
<td ><div >KIS</div></td>
<td ><div >5</div></td>
<td ><div >21.0000</div></td>
<td ><div >已取消</div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="5" /></div> </td>
<td ><div >DJPH889</div></td>
<td ><div >2005-02-02</div></td>
<td ><div >0</div></td>
<td ><div >直销</div></td>
<td ><div >KIS</div></td>
<td ><div >5</div></td>
<td ><div >1.0000</div></td>
<td ><div > </div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="6" /></div> </td>
<td ><div >tytutyjh465456</div></td>
<td ><div >2005-02-02</div></td>
<td ><div >0</div></td>
<td ><div >购销</div></td>
<td ><div >KIS</div></td>
<td ><div >0</div></td>
<td ><div >21.0000</div></td>
<td ><div >生产部已审核</div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="7" /></div> </td>
<td ><div >KDSZ2005050698</div></td>
<td ><div >2005-05-05</div></td>
<td ><div >-1</div></td>
<td ><div >分销</div></td>
<td ><div >KIS</div></td>
<td ><div >10.2</div></td>
<td ><div >21.0000</div></td>
<td ><div >生产部已审核</div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="8" /></div> </td>
<td ><div >KDSZ2005050698</div></td>
<td ><div >2005-05-05</div></td>
<td ><div >-1</div></td>
<td ><div >分销</div></td>
<td ><div >KIS</div></td>
<td ><div >10.2</div></td>
<td ><div >12.0000</div></td>
<td ><div >总代已审核</div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="9" /></div> </td>
<td ><div >KDSZ2005050698</div></td>
<td ><div >2005-05-05</div></td>
<td ><div >-1</div></td>
<td ><div >分销</div></td>
<td ><div >KIS</div></td>
<td ><div >10.2</div></td>
<td ><div >32.0000</div></td>
<td ><div >已取消</div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="10" /></div> </td>
<td ><div >KDSZ2005050698</div></td>
<td ><div >2005-05-05</div></td>
<td ><div >-1</div></td>
<td ><div >分销</div></td>
<td ><div >KIS</div></td>
<td ><div >10.2</div></td>
<td ><div >12.0000</div></td>
<td ><div > </div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="11" /></div> </td>
<td ><div >KDSZ2005050698</div></td>
<td ><div >2005-05-05</div></td>
<td ><div >-1</div></td>
<td ><div >分销</div></td>
<td ><div >KIS</div></td>
<td ><div >10.2</div></td>
<td ><div >12.0000</div></td>
<td ><div > </div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="12" /></div> </td>
<td ><div >KDSZ2005050698</div></td>
<td ><div >2005-05-05</div></td>
<td ><div >-1</div></td>
<td ><div >分销</div></td>
<td ><div >KIS</div></td>
<td ><div >10.2</div></td>
<td ><div >12.0000</div></td>
<td ><div >已取消</div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="13" /></div> </td>
<td ><div >KDSZ2005050698</div></td>
<td ><div >2005-05-05</div></td>
<td ><div >-1</div></td>
<td ><div >分销</div></td>
<td ><div >KIS</div></td>
<td ><div >10.2</div></td>
<td ><div >12.0000</div></td>
<td ><div >已取消</div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="14" /></div> </td>
<td ><div >KDSZ2005050698</div></td>
<td ><div >2005-05-05</div></td>
<td ><div >-1</div></td>
<td ><div >分销</div></td>
<td ><div >KIS</div></td>
<td ><div >10.2</div></td>
<td ><div >12.0000</div></td>
<td ><div >已取消</div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="15" /></div> </td>
<td ><div >KDSZ2005050698</div></td>
<td ><div >2005-05-05</div></td>
<td ><div >-1</div></td>
<td ><div >分销</div></td>
<td ><div >KIS</div></td>
<td ><div >10.2</div></td>
<td ><div >21.0000</div></td>
<td ><div >已取消</div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="16" /></div> </td>
<td ><div >KDSZ2005050698</div></td>
<td ><div >2005-05-05</div></td>
<td ><div >-1</div></td>
<td ><div >分销</div></td>
<td ><div >KIS</div></td>
<td ><div >10.2</div></td>
<td ><div >12.0000</div></td>
<td ><div >已取消</div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="17" /></div> </td>
<td ><div >KDSZ2005050698</div></td>
<td ><div >2005-05-05</div></td>
<td ><div >-1</div></td>
<td ><div >分销</div></td>
<td ><div >KIS</div></td>
<td ><div >10.2</div></td>
<td ><div >21.0000</div></td>
<td ><div >已取消</div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="18" /></div> </td>
<td ><div >KDSZ2005050698</div></td>
<td ><div >2005-05-05</div></td>
<td ><div >-1</div></td>
<td ><div >分销</div></td>
<td ><div >KIS</div></td>
<td ><div >10.2</div></td>
<td ><div >12.0000</div></td>
<td ><div >已取消</div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="19" /></div> </td>
<td ><div >KDSZ2005050698</div></td>
<td ><div >2005-05-05</div></td>
<td ><div >-1</div></td>
<td ><div >分销</div></td>
<td ><div >KIS</div></td>
<td ><div >10.2</div></td>
<td ><div >12.0000</div></td>
<td ><div >已取消</div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="20" /></div> </td>
<td ><div >KDSZ2005050698</div></td>
<td ><div >2005-05-05</div></td>
<td ><div >-1</div></td>
<td ><div >分销</div></td>
<td ><div >KIS</div></td>
<td ><div >10.2</div></td>
<td ><div >12.0000</div></td>
<td ><div >已取消</div></td></tr>
<tr >
<td width="30px" >
<div ><input type="checkbox" value="21" /></div> </td>
<td ><div >KDSZ2005050698</div></td>
<td ><div >2005-05-05</div></td>
<td ><div >-1</div></td>
<td ><div >分销</div></td>
<td ><div >KIS</div></td>
<td ><div >10.2</div></td>
<td ><div >12.0000</div></td>
<td ><div >已取消</div></td></tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<div></div>
</div>
</body>
</html>



分享给朋友:
您可能感兴趣的文章:
随机阅读: