HomeKlevin的博客

LuckyEmily

Table td下用rowspan的一二问题

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

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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/aspjavac123/article/details/49945023
个人分类: 学习笔记
上一篇欢迎使用CSDN-markdown编辑器
下一篇Jquery查找选中的checkbox
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭