`
feitu_jeff
  • 浏览: 42735 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

table中colspan控制

阅读更多
表格中如果增加了 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
分享到:
评论

相关推荐

    javascript 动态table添加colspan\rowspan 参数的方法

    解决方法:取得表对象,并取得他下面对应的行对象下的某个元素,这里如document.tableId.rows[i].cells[j]即取得表下第i行下的第j个元素,然后document.tableId.rows[i].cells[j].colspan=n即可。 eg: dempTHFirst为...

    table数据相同合并单元格

    table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二行,对第一行添加rowspan 【table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二行,对第一行添加rowspan】

    table-rowspan表格自动合并单元格插件

    对table表格进行操作,两行根据点击添加 删除按钮 进行单元格的删除 添加 合并单元格。

    colspan和rowspan

    NULL 博文链接:https://romyli.iteye.com/blog/774163

    表格设置table-layout:fixed后对单元格宽度设置无效

    在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效,下面有详细的解决方法,大家可以学习学习

    html table实现复杂表头的示例代码

    复杂表格一般是用到td的两个属性:rowspan 、colspan属性值。 在html中&lt;td&gt; 标签定义 HTML 表格中的标准单元格。  (1)rowspan 属性规定单元格可横跨的行数;  (2)colspan 属性规定...table id="tab" cellpadding="1

    通过jquery还原含有rowspan、colspan的table的实现方法

    需求 把含有rowspan、colspan的table还原。 例如原table为:  还原后的table为: 代码原理 对table进行遍历,如果td的rowspan属性值大于1,则给当前的td的父元素的兄弟元素添加td,如果td的colspan属性值大于1,...

    jeasyui的dataGrid的打印和导出,jeasyui报表 table转成excel 实例下载

    tableString += ' colspan="' + frozenColumns[index][i].colspan + '"'; } if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') { nameList += ',{"f":"' + ...

    网页设计实验 Table的使用

    选中第一列,右键会有合并单元格,拖动单元格或者在代码段的height和width输入值来设置单元格大小,用colspan表示合并几列单元格,若是想要对单元格的内容进行加粗显示,可以用来代替,另外可以用表示表标题 ...

    正则表达式替换table表格中的样式与空标记(保留rowspan与colspan)

    \nstr='&lt;table id=tblSort cellspacing=0 xss=removed xss=removed&gt;&lt;tr id=sdf&gt;&lt;td xss=removed class=ok colspan=8 height=500 rowspan=5&gt;'; str+='&lt;td xss=removed xss=removed colspan=8 xss=removed rowspan=5&gt;'...

    colspan使用方法

    colspan使用方法! 值得下载看看!资源免费,大家分享!!

    像Excel一样的table表格

    overflow:hidden\"&gt;&lt;div id=\"DataGroup2\" style=\"position:relative\"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/td&gt;&lt;td valign=\"top\"&gt;&lt;div id=\"DataFrame3\" style=\"position:relative;background:#000;...

    js统计Table单元格实际行列 不用rowSpan colSpan,而用offsetLeft

    NULL 博文链接:https://fireinjava.iteye.com/blog/759190

    可以动态增加table行的javascript代码

    * 在引用页面中相应的程序为: * 例如: * 1、&lt;script language="javascript" src="js/addContentRow.js"&gt;&lt;/script&gt; * 2、 * &lt;!-- 附件部分 --&gt; * &lt;table width="100%" height="" border="0" id="Ttable1" &gt;...

    html表格<table></table>

    html表格 &lt;table border="1"&gt; ... &lt;td colspan="2" align="center"&gt; 第二行的单元格 第一行的单元格 第二行的单元格 第三行的单元格 &lt;/table&gt;

    javascript清理table样式

    原因是由于其它有table,而table表格中的tr/td都携带了从word中粘贴过来的样式,需要将这一大段的字符串中的table、tr、td中携带的样式清除掉,同时还不能破坏table结构,即要保留tr中的rowspan和td中的colspan属性...

Global site tag (gtag.js) - Google Analytics