表格中如果增加了 colspan 属性,如果colspan所在属性td或th元素宽度大于表格中固定宽度时,表格将不再固定,而是自适应,如
<table border='1' width="100%" style='table-layout: fixed;'>
<tr>
<td width='100' >1</td>
<td width='150'>1</td>
<td>1</td>
</tr>
<tr>
<td colspan='3'><div style="width:700px;background-color:red;"></div></td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
此时表格中 首行 td width属性将不再有效。如何固定宽度。一般在表格中定义属性
table-layout: fixed;使其固定
如果一下情况colspan 在第一行情况下 ,td中也将失效
<table border='1' width="100%" style='table-layout: fixed;'>
<tr>
<td colspan='3'><div style="width:700px;background-color:red;"></div></td>
</tr>
<tr>
<td width='100' >1</td>
<td width='150'>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
这时可以在最上边加以下代码来控制td宽度
<colgroup>
<col width=60%></col>
<col width=20%></col>
<col width=20%></col>
</colgroup>
如:
<table border='1' width="100%" style='table-layout: fixed;'>
<colgroup>
<col width='100'></col>
<col width='150'></col>
<col ></col>
</colgroup>
<tr>
<td colspan='3'><div style="width:700px;background-color:red;"></div></td>
</tr>
<tr>
<td width='100' >1</td>
<td width='150'>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
转载:http://blog.sina.com.cn/s/blog_506d9e2001018254.html
分享到:
相关推荐
解决方法:取得表对象,并取得他下面对应的行对象下的某个元素,这里如document.tableId.rows[i].cells[j]即取得表下第i行下的第j个元素,然后document.tableId.rows[i].cells[j].colspan=n即可。 eg: dempTHFirst为...
table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二行,对第一行添加rowspan 【table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二行,对第一行添加rowspan】
对table表格进行操作,两行根据点击添加 删除按钮 进行单元格的删除 添加 合并单元格。
NULL 博文链接:https://romyli.iteye.com/blog/774163
在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效,下面有详细的解决方法,大家可以学习学习
复杂表格一般是用到td的两个属性:rowspan 、colspan属性值。 在html中<td> 标签定义 HTML 表格中的标准单元格。 (1)rowspan 属性规定单元格可横跨的行数; (2)colspan 属性规定...table id="tab" cellpadding="1
需求 把含有rowspan、colspan的table还原。 例如原table为: 还原后的table为: 代码原理 对table进行遍历,如果td的rowspan属性值大于1,则给当前的td的父元素的兄弟元素添加td,如果td的colspan属性值大于1,...
tableString += ' colspan="' + frozenColumns[index][i].colspan + '"'; } if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') { nameList += ',{"f":"' + ...
选中第一列,右键会有合并单元格,拖动单元格或者在代码段的height和width输入值来设置单元格大小,用colspan表示合并几列单元格,若是想要对单元格的内容进行加粗显示,可以用来代替,另外可以用表示表标题 ...
\nstr='<table id=tblSort cellspacing=0 xss=removed xss=removed><tr id=sdf><td xss=removed class=ok colspan=8 height=500 rowspan=5>'; str+='<td xss=removed xss=removed colspan=8 xss=removed rowspan=5>'...
colspan使用方法! 值得下载看看!资源免费,大家分享!!
overflow:hidden\"><div id=\"DataGroup2\" style=\"position:relative\"></div></div></td></tr></table></div></td><td valign=\"top\"><div id=\"DataFrame3\" style=\"position:relative;background:#000;...
NULL 博文链接:https://fireinjava.iteye.com/blog/759190
* 在引用页面中相应的程序为: * 例如: * 1、<script language="javascript" src="js/addContentRow.js"></script> * 2、 * <!-- 附件部分 --> * <table width="100%" height="" border="0" id="Ttable1" >...
html表格 <table border="1"> ... <td colspan="2" align="center"> 第二行的单元格 第一行的单元格 第二行的单元格 第三行的单元格 </table>
原因是由于其它有table,而table表格中的tr/td都携带了从word中粘贴过来的样式,需要将这一大段的字符串中的table、tr、td中携带的样式清除掉,同时还不能破坏table结构,即要保留tr中的rowspan和td中的colspan属性...