Table td下用rowspan的一二问题

原创 2015年11月20日 11:53:27

1.以前只知道用colspan来合并td占两个列,后来因为业务需要想让td占多行放在开头

接着在W3School上找到td rowspan属性,在示例里实践得到:

这就是我想要的效果!代码如下

<html>
<body>

<table width="100%" border="1">
<thead>
  <tr>
    <th>Quarter</th>
    <th>Year</th>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td rowspan="5">Q1</td>
    <td rowspan="5">2015</td>
    <td>January</td>
    <td>$100</td>
    <td rowspan="3">TEST</td>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</tbody>
</table>

</body>
</html>


可是,问题来了,W3School上的方法并不能直接运用,于是激动的心情瞬间被泼了一盆凉水,纠结了好久。

后来我不再挣扎于在W3School上直接修改,因为它的后台CSS和我本地的并不是一样,于是,我终于又找到了如下方法:

<tr>
  <td rowspan="3">粤A00001</td>
  <td rowspan="3">习大大</td>
  <td rowspan="3">xidada@cn</td>
  <td rowspan="3">中文</td>
  <td>政治</td>
  <td>100</td>
  <td rowspan="3">EDIT</td>
</tr>
<tr>
  <td>经济</td>
  <td>100</td>
</tr>
<tr></tr>

区别在于,

1.我把需要rowspan的td和相应的不需要rowspan的td全部写在第一个tr里面,接下来的行,只需要写上相应的数据

2.我把rowspan属性的值的设置方法变成了记录行+1,并不是W3School上的+2,于是就能看到这样:

这就是我想要的结果!!!

版权声明:本文为博主原创文章,未经博主允许不得转载。

兼容性:jquery在ie7下的(Rowspan)属性赋值问题

$(document).ready(function(){ var bro=$.browser; if(bro.msie) {binfo="Microsoft Internet Explorer ...
  • wskd161
  • wskd161
  • 2015年01月16日 17:48
  • 2070

jquery.table.rowspan.js 表格自动合并单元格插件

日常开发中,经常遇到表格里需要自动合并单元格,考虑到写服务器控件比较消耗性能,因些还是把这种工作交给客户端Javascript去做吧,基于习惯用jquery框架,所以封装了一个Jquery插件。 1....

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

table合并单元格colspan和rowspan

起因    最近要实现一个成绩分析的功能,最终是要呈现到Word中的,一开始想到的使用报表显示,但是得有单独的数据库表来存储这些数据,如果说项目是刚开始做的话,倒也好说,不过现在项目已经进入了后期,在...

td 的 colspan 和 rowspan

td 的 colspan属性代表所占列数, rowspan 属性代表所占行数   员工号 学历 专业 毕业学校 3行2列,10代表10px,像素点。...

奇葩的table里<th>和<td>不等宽问题

近日遇到一个对我来说十分奇葩的问题,

table表格中文本溢出text-overflow:ellipsis使用中td表格宽度失效问题

1、一般文本超出宽度可进行如下设置: width:300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ...

java 页面上表格的td 的 colspan 和 rowspan 属性

td 的 colspan属性代表所占列数, rowspan 属性代表所占行数。 [html] view plain copy   table border="10">    tr> ...

jquery还原含有rowspan、colspan的table

需求  把含有rowspan、colspan的table还原。  例如原table为:  还原后的table为: 代码原理  对table进行遍历,如果td的rowspan属性值大于1,则给当前的td...
  • lee576
  • lee576
  • 2012年05月16日 15:50
  • 4559
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Table td下用rowspan的一二问题
举报原因:
原因补充:

(最多只允许输入30个字)