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,于是就能看到这样:

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

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

相关文章推荐

Table中的td,th用了Colspan或者Rowspan之后,设置宽度无效的解决方法

最近用到td中的Colspan,后来设置宽度的时候发现怎么搞都无法实现到自己想要的效果,最后就把table中的第一行设置为无colspan和rowspan属性的,该是几列就几列,然后把每列宽度设好,用...

td格式出问题,可以了解下,是不是你的dispaly:inline-block

用td 不是很多,今天第一次使用 谢了一个这样的代码代码段 </tr

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

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

【HTML】table表格拆分合并(colspan、rowspan)

代码演示 横向合并: <meta http-equiv="Content-Type" content="text/html; charset=UT

jquery还原含有rowspan、colspan的table

需求  把含有rowspan、colspan的table还原。  例如原table为:  还原后的table为: 代码原理  对table进行遍历,如果td的rowspan属性值大于1,则给当前的td...
  • lee576
  • lee576
  • 2012-05-16 15:50
  • 4415

html中的table布局:colspan和rowspan

一开始不知道,用了之后才知道table

table跨行(rowspan)跨列(colspan)

class="tree dataTable no-footer" showAddBtn="true"> style="background: #DBDBDB"> ...

table合并单元格colspan和rowspan

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

datagrid IE8以下浏览器提示 rowspan 为空或不存在问题的解决

项目里要用到这样的表头,挺简单的。但是IE8及以下版本里会报  "rowspan" 为空或不是对象 的错误。IE9 firefox则一切正常。 网上Google之发现引起该错误的原因如下: 1,缺...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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