关闭

Table td下用rowspan的一二问题

1457人阅读 评论(0) 收藏 举报
分类:

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

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

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2488次
    • 积分:62
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:4篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档