动态画表格，为何表头大小会与源表不一样

BraveYang 2003-08-25 12:04:17
下面是源码
我的表格二的是用表格一里的tbody部分画的，但宽度会变掉
那位大侠指点一二

<html>
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<table width="208" border="1" name="tb1" id="tb1">
<tbody id=th1>
<tr>
<td align="center" rowspan=3>排名</td>
<td align="center" rowspan=3>营业部</td>
<td align="center" colspan=6>股票</td>
<td align="center" rowspan=2 colspan=2>基金</td>
<td align="center" rowspan=2 colspan=2>Ａ股基金合计</td>
<td align="center" rowspan=2 colspan=2>股票基金合计</td>
<td align="center" colspan=12>债券</td>
<td align="center" rowspan=2 colspan=2>合计</td>
<td align="center" rowspan=3>营业部</td>
</tr>
<tr>
<td align="center" colspan=2>A股</td>
<td align="center" colspan=2>B股</td>
<td align="center" colspan=2>小计</td>
<td align="center" colspan=2>国债</td>
<td align="center" colspan=2>企业债</td>
<td align="center" colspan=2>可转债</td>
<td align="center" colspan=2>现货小计</td>
<td align="center" colspan=2>回购</td>
<td align="center" colspan=2>小计</td>
</tr>
</tbody>
<tr>
<td align=right nowrap> </td>
<td align=center nowrap> 公司合计</td>
<td align=right nowrap> 336303.92</td>
<td align=right nowrap> 1.81</td>
<td align=right nowrap> 9380.50</td>
<td align=right nowrap> 1.96</td>
<td align=right nowrap> 345684.42</td>
<td align=right nowrap> 1.82</td>
<td align=right nowrap> 2578.85</td>
<td align=right nowrap> 1.01</td>
<td align=right nowrap> 338882.77</td>
<td align=right nowrap> 1.80</td>
<td align=right nowrap> 348263.27</td>
<td align=right nowrap> 1.81</td>
<td align=right nowrap> 5973.61</td>
<td align=right nowrap> 0.52</td>
<td align=right nowrap> 14947.81</td>
<td align=right nowrap> 1.95</td>
<td align=right nowrap> 430.07</td>
<td align=right nowrap> 0.57</td>
<td align=right nowrap> 21351.49</td>
<td align=right nowrap> 1.07</td>
<td align=right nowrap> 11170.19</td>
<td align=right nowrap> 0.01</td>
<td align=right nowrap> 32521.68</td>
<td align=right nowrap> 0.04</td>
<td align=right nowrap> 380784.95</td>
<td align=right nowrap> 0.36</td>
<td align=center nowrap> 公司合计</td>
</tr>
</table>
<br>
<table name="title1" id="title1" border="1">
</table>
</body>
</html>
<script>
var datatr = tb1.rows(th1.rows.length);
title1.width = tb1.offsetWidth;
for(var i=0;i<th1.rows.length;i++){
var mytr = th1.rows(i);
var newtr = title1.insertRow();
var rw = 0;
for(var j=0;j<mytr.cells.length;j++){
var mytd = newtr.insertCell();
var prtd = th1.rows(i).cells(j);
mytd.colSpan = prtd.colSpan;
mytd.rowSpan = prtd.rowSpan;
mytd.className = prtd.className;
mytd.align = prtd.align;
mytd.innerText = prtd.innerText;
mytd.width = prtd.offsetWidth;
}
}
</script>
...全文
40 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
BraveYang 2003-08-25
  • 打赏
  • 举报
 回复
你可以把这段代码贴成html文件看看，第一个表格的每列宽度会和第二个表格的每列宽度不同
也可以在for循环里用
alert(mytd.innerText + (prtd.clientWidth)+(mytd.clientWidth));
做检查
aleccheung 2003-08-25
  • 打赏
  • 举报
 回复
宽度会变掉？？是什么意思？？？？
kaibinsj 2003-08-25
  • 打赏
  • 举报
 回复
满强的哦，不过有数据一撑当然宽度看着不一样了啊！
JS固定表头和左边列（最新源码）1.9
锁定表头及固定左边列，原生JS原创代码 需要注意的问题： 1.表格的宽度以及表格每一列的宽度需要固定（特殊情况除外：当表格列数少并且表格总宽度明显小于表格父容器的宽度时，也就是表格列不存在自动换行的问题） 2.表格父容器尺寸大小改变时，需要调用 setBoxSize 方法，目的是判断父容器是否出现滚动条 1.1 修正了对IE6、IE7的兼容问题 1.2 修正了固定行、列的样式问题 1.3 IE6/IE7浏览器 不启用该功能 1.4 增加了拆分线， 修正了重复生成锁定行列的问题以及生成错位的问题， 修正了行、列事件无法复制的问题， 增加了IE6/IE7/IE8 启用设置参数（ieLowVersionEnabled: true|false) ，默认不启用， 注：IE6/7/8锁定表头 由于兼容性问题，有些情况下会有一些错位的问题 1.5 增加了 显示/隐藏功能，修正了非IE浏览器下列宽错位问题 1.6 修正了当有合并单元格时，锁定单元格错位的问题，修正了表格行数较多时的性能问题 1.7 表格单元格可以不指定宽度（锁定时，取实际的单元格宽度），当单元格的左右两边的borderWidth不一样时，会有一些错位 若单元格宽度是固定的，可以在第3个参数(config)中指定 isFixedSize:true 修正表头列未锁定的Bug 1.8 修正表格含有thead时的样式丢失问题，以及行数设置问题，修正thead/tbody行归属问题 1.9 移除tbTopLeft的边框线 修正表格cellpadding/cellspacing的设置问题 修复Firefox下的padding导致的错位问题 修复thead复制没有底部分割线的问题 修复thead复制时无背景色的问题 增加复选框同步功能（如果是JS代码设置复选框选中，需要调用 .setCheckBoxSync()方法） .setCheckBoxSync 方法参数说明：4种参数 1) 复选框控件（html object）数组 2) 复选框控件（html object） 3) 复选框控件ID (string) 4) 空参数（尽量不用空参数）
JS固定表头和左边列V2.0（源码）
锁定表头及固定左边列，原生JS原创代码 需要注意的问题： 1.表格的宽度以及表格每一列的宽度需要固定（特殊情况除外：当表格列数少并且表格总宽度明显小于表格父容器的宽度时，也就是表格列不存在自动换行的问题） 2.表格父容器尺寸大小改变时，需要调用 setBoxSize 方法，目的是判断父容器是否出现滚动条 1.1 修正了对IE6、IE7的兼容问题 1.2 修正了固定行、列的样式问题 1.3 IE6/IE7浏览器 不启用该功能 1.4 增加了拆分线， 修正了重复生成锁定行列的问题以及生成错位的问题， 修正了行、列事件无法复制的问题， 增加了IE6/IE7/IE8 启用设置参数（ieLowVersionEnabled: true|false) ，默认不启用， 注：IE6/7/8锁定表头 由于兼容性问题，有些情况下会有一些错位的问题 1.5 增加了 显示/隐藏功能，修正了非IE浏览器下列宽错位问题 1.6 修正了当有合并单元格时，锁定单元格错位的问题，修正了表格行数较多时的性能问题 1.7 表格单元格可以不指定宽度（锁定时，取实际的单元格宽度），当单元格的左右两边的borderWidth不一样时，会有一些错位 若单元格宽度是固定的，可以在第3个参数(config)中指定 isFixedSize:true 修正表头列未锁定的Bug 1.8 修正表格含有thead时的样式丢失问题，以及行数设置问题，修正thead/tbody行归属问题 1.9 移除tb_top_left的底部边框线 修正表格cellpadding/cellspacing的设置问题 修复Firefox下的padding导致的错位问题 修复thead复制没有底部分割线的问题 修复thead复制时无背景色的问题 增加复选框同步功能（如果是JS代码设置复选框选中，需要调用 .setCheckBoxSync()方法） .setCheckBoxSync 方法参数说明：4种参数 1) 复选框控件（html object）数组 2) 复选框控件（html object） 3) 复选框控件ID (string) 4) 空参数（尽量不用空参数） 增加复选框选择：全选、取消、反选，需要调用 .setChecked(oper, name) oper: 1-全选，2-取消，3-反选； name: checkbox的 name属性名称 解决启用bootstrap.css之后，表格列宽获取的问题，目前采用的方法是屏蔽，虽解决了问题，但不明所以，留待后续彻解。临时解决方案：在第3个参数(config)中指定 isBootstrap:true，或者也可以不指定，js会自动检测页面上有没有启用文件名为bootstrp的css（如果启用bootstrap.css，但文件名不是bootstrap，那请指定isBootstrap参数）。 增加colStartRowIndex参数，当表格顶部的行有合并所有列的情况下，列宽计算从指定的行开始 2.0 增加 window.onresize事件监听（当触发 window.onresize时自动重新固定表头） 增加左边固定位置鼠标滚轮事件
免费DataGridView打印及.NET轻松打印控件5.0版
本DataGridView打印控件和.NET轻松打印控件5.0版（含报表模板设计组件）2012年5月12日修改完成，完全免费，在.NET2.0及以上环境下都可以使用（VB、C#等都可以用），有帮助文档与使用实例。 与4.95版相比，控件5.0版的主要更改如下： 1、解决了生成预览及打印过程中的状态窗口中显示的“第 页共 页”问题，现在可以正确显示总页数。 2、增加了打印DataGridView中选定内容（选定行、列或矩形区域）的功能。对DGVPrint组件，设置PrintRange属性为相应的值即可，而对于VB2008Print组件，请先用CopyDataGridViewSelectedRange函数将要打印的DGV复制到新的DGV，然后再用PrintDGV函数打印这个新DGV即可。 3、增加了大量的绘图函数（如路径、多边形、填充多边形、曲线等），基本上.NET的GDI+绘图函数都有了（注意，填充类绘图函数名称为DrawFill……，而不是GDI+的Fill…。另外，对于Brush参数，只支持SolidBrush、TextureBrush、LinearGradientBrush三种类型的画刷，而且对于后2个画刷，只支持其中的主要属性。 4、增加了直接打印Panel、GroupBox等容器控件中的内容的DrawPanel函数（对容器中的TextBox控件与Label控件以文本的形式打印，除此之外的其他除容器控件之外的控件如CheckBox、ComboBox、Button控件等则直接以图片的形式打印，函数还支持嵌套容器控件的打印，且如果一页打印不下具有自动换页续打功能）。借助该函数的功能，您可以在Panel等容器控件中设计好要打印的内容及打印相对位置，控件轻松帮助您解决打印问题。（参见演示实例） 5、增加了报表文件及模板文件的自动关联功能。在运行了“打印控件安装.msi”文件安装了打印控件的前提下，双击报表文件(扩展名为you的文件)即可打印预览该报表的内容；双击报表模板文件（扩展名为mb的文件)即可进入报表模板修改界面（此时如果打印预览报表模板不会有数据，因为这样修改报表模板时是没有设置数据源的）。 6、解决了原EasyReport报表组件由于资源释放不及时，在多次重复使用时占用大量句柄而可能产生的不能打印或预览问题。 7、解决了DataGridView在有固定列（冻结列）的时候，有些情况下（DGV固定列的index与DisplayIndex不一致时）打印可能出错的问题。 8、DGVPrint组件的自定义纸张使用更方便，设计时在可以通过设置PaperHeight与PaperWidth属性设置，运行时在“打印参数”设置窗口中也可设置自定义纸张大小。 9、解决了EasyReport组件“页表头”区域设置的背景图片覆盖该区域打印内容的问题。 10、增加了打印XML格式的HTML文档的功能（目前只支持部分HTML标记，不支持表格及图片等标记，请参见DrawXML函数） 11、对帮助文件做了进一步的修订 12、增加了很多新的演示实例。 13、其他一些完善和修改。 本控件特色： 1、强大的DataGridView打印功能，不仅可以以多种形式（普通打印、分栏打印、跨页打印、工资条打印）打印DataGridView表格，基本上能完全按DataGridView控件本身设置的格式如字体、字号、背景颜色、前景颜色、单元格对齐方式等打印出来，文字图像都可以打印，而且是完全根据表格当前的显示顺序进行打印的，如果您在使用时调整了列的顺序，刷新打印后就会按调整后的列显示顺序进行打印，基本上做到了所见即所得的打印。 2、报表设计功能，这是4.7版控件的新增功能。报表模板设计组件EasyReport与WebEasyReport组件可以设计普通报表、分组报表、套打模板等，分别以DataGridView和GridView为数据源。控件的位置以毫米为计量单位，定位准确，很适合套打单据设计。 3、分组汇总打印DataGridVeiw功能，每组还可以自动换新页打印，还可以自动增加行号。 4、强大的文本打印输出功能，有多个文本打印重载函数，打印文本时，如果需要，控件会自动换行或换页打印输出。 5、支持同一文档多种版面格式打印（类似于Word中的节的功能）：对同一份文档，不同的页面可以设置不同的格式（纸张大小、纸张方向、页边距），只需要在新增一页时在NewPage方法中指定要使用的页面格式即可，使用非常简单。 6、报表文件保存功能。本控件允许将当前打印预览的内容保存为报表文件，以后使用本控件重新打开该报表文件即可重现原来保存报表时的打印内容。 7、打印方案保存与读取功能。可以将当前打印参数保存为打印方案文件，或都从保存的打印方案文件中读取打印参数。 8、水印
免费DataGridView打印及.NET轻松打印控件5.6版（VB打印，C#打印）
本DataGridView打印控件和.NET打印控件5.6版（含报表模板设计组件）2014年6月22日修改完成，完全免费，在.NET2.0及以上环境下都可以使用（VB打印、C#打印都是可以的），有帮助文档与使用实例。 与上一版本的5.5版相比，新控件5.6版的主要更改如下： 1、增加了一个新打印组件SimpleReport组件，该组件与DGVPrint组件一样在运行时可进行打印参数设置，但比DGVPrint组件功能更强大，可以自动管理多个打印方案，在打印预览时可以自由在各个打印方案之间切换；可以在打印参数设置窗口中动态定义多表头，还可以像EasyReport组件一样设置和使用参数变量（具体使用效果参见实例程序）； 2、解决了EasyReport组件在插入变量参数时，变量参数未排序导致查找不方便的问题； 3、在打印预览界面添加了简单的双面打印功能。（打印预览界面工具栏中的“打印\双面打印”菜单）； 4、其他一些完善，比如DGVPrint组件中设置的行高无效等问题。 本控件特色： 1、强大的DataGridView打印功能，不仅可以以多种形式（普通打印、分栏打印、跨页打印、工资条打印）打印DGV表格，基本上能完全按DGV控件本身设置的格式如字体、字号、背景颜色、前景颜色、单元格对齐方式等打印出来，文字图像都可以打印，而且是完全根据表格当前的显示顺序进行打印的，基本上做到了所见即所得的打印。 2、报表设计功能。报表模板设计组件EasyReport与WebEasyReport组件可以设计普通报表、分组报表、套打模板等，分别以DataGridView为数据源。控件的位置以毫米为计量单位，定位准确，很适合套打单据设计。 3、强大的图表打印功能。5.2版控件新增了一个Chartlet的组件，使用非常方便，可以生成柱形图、饼图、折线图等多种图形，而且可以设置2D或3D效果，既可以在打印控件中打印出来，也可以在Graphics对象中显示。 4、分组汇总打印DataGridVeiw功能，每组还可以自动换新页打印，还可以自动增加行号。 5、强大的文本打印输出功能，控件提供多个文本打印重载函数，打印文本时，如果需要，控件会自动换行和换页打印输出。还增加了以指定行间距及字符间距打印文本的功能，可以用固定行距，也可以用单倍或多倍行距打印文本。 6、强大的绘图功能，基本上.NET的GDI+的绘图函数(如直线、矩形、路径、多边形、曲线等)都有，只有个别函数的名称有点区别。 7、支持同一文档多种版面格式打印（类似于Word中的节的功能）：对同一份文档，不同的页面可以设置不同的格式（纸张大小、纸张方向、页边距），只需要在新增一页时在NewPage方法中指定要使用的页面格式即可，使用非常简单。 8、报表文件保存功能。本控件允许将当前打印预览的内容保存为报表文件，以后使用本控件重新打开该报表文件即可重现原来保存报表时的打印内容。 9、Excel导出功能，可以将DataGridView和GridView导出为Excel文件，5.2版控件还增加了不依赖Office的导出Excel功能，而且速度非常快，5.4版还增加了合并单元格的导出功能。 10、打印DataGridView时的打印方案保存与读取功能。可以将当前打印参数保存为打印方案文件，或者从保存的打印方案文件中读取打印参数。 11、水印打印功能。根据需要，可以在页面中打印或不打印以半透明空心文字打印水印。 12、强大的容器控件打印功能(DrawPanel函数)。借助该函数，您只需要在您的容器控件中设计好要打印的内容及打印内容的相对位置，控件轻松帮你打印出来(如果超过一页，控件会自动换页续打)。 13、特殊文字效果打印功能。控件具有打印浮雕文字、阴影文字、空心文字、块文字的功能。 14、页眉页脚中既可打印文字，也可打印图像，或者即打印图像又打印输出文字。 15、图像与图标打印输出功能。 16、多表头（跨行跨列的复杂表头）打印功能，多表头组件支持多表头显示与打印、单元格内容的合并显示、打印与导出。 17、自定义纸张支持功能。 18、纸张背景图片设置打印功能。 19、.NET4.0支持功能(是单独的一个文件)。 20、直接打印窗口中的TreeView控件功能。 21、打印窗口中的ListView功能。 22、RichTextBox控件的RTF文本打印功能。 23、斜线表头打印功能（5.4版新增）。 24、二维码打印功能（5.5版本增加）。 25、5.6版新增的SimpleReport组件允许您在一个方案文件中管理多个打印方案，在打印预览时能自由在各个打印方案之间切换。 我将持续改进该控件，并将不断推出控件的新版本，要查看或下载控件的升级版本，请登陆网站：http://myyouping.download.csdn.n
Element 中根据屏幕大小动态计算表格高度以实现固定表头
在Element UI的表格组件中，要想固定表头，必须给表格指定一个高度，但是用户的屏幕大小是不一样的，为了能将表格底部的分页区域始终显示在屏幕内，就需要动态计算表格的高度。 以下是代码实现： <template> <div class="table-container"> <!-- 1. 绑定动态计算的表格高度 --> <el-table :data="data" style="width:100%" :height=
Web 开发

81,092

社区成员

341,716

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章