详解React中合并单元格的正确写法


Posted in Javascript onJanuary 08, 2019

用表格进行页面布局,页面布局在各种浏览器的的兼容性, 都非常好, 而在react中使用表格布局, 合并单元格的写法比较特殊, 博主查了很久才找到正确的写法, 在这里分享一下

效果图

详解React中合并单元格的正确写法

源码

react组件文件

import React, {
 Component
} from 'react';

import './App.css';

class App extends Component {
 render() {

  return (
   <div className="App">
    <div className="title">4*4表格</div>
    <table>
     <tbody>
      <tr><td>00</td><td>01</td><td>02</td><td>03</td></tr>
      <tr><td>10</td><td>11</td><td>12</td><td>13</td></tr>
      <tr><td>20</td><td>21</td><td>22</td><td>23</td></tr>
      <tr><td>30</td><td>31</td><td>32</td><td>33</td></tr>
     </tbody>
    </table>
    <hr/>
    <div className="title">跨列写法(colSpan="2")</div>
    <table>
     <tbody>
      <tr><td>00</td><td colSpan="2">01</td><td>03</td></tr>
      <tr><td>10</td><td>11</td><td>12</td><td>13</td></tr>
      <tr><td>20</td><td>21</td><td>22</td><td>23</td></tr>
      <tr><td>30</td><td>31</td><td>32</td><td>33</td></tr>
     </tbody>
    </table>
    <hr/>
    <div className="title">跨行写法(rowSpan="2")</div>
    <table>
     <tbody>
      <tr><td>00</td><td rowSpan="2">01</td><td>02</td><td>03</td></tr>
      <tr><td>10</td><td>12</td><td>13</td></tr>
      <tr><td>20</td><td>21</td><td>22</td><td>23</td></tr>
      <tr><td>30</td><td>31</td><td>32</td><td>33</td></tr>
     </tbody>
    </table>
    <hr/>

   </div>
  );
 }
}

export default App;

App.css

.App {
 text-align: center;
}

td {
 border: 1px solid #AB3319;
 width: 30px;
 height: 30px;
}

.title {
 color: #444444;
 font-size: 20px;
 margin: 20px;
}

table {
 margin: 20px auto;
 border-collapse: collapse;
}

小结:

React的样式一般都写成js对象的形式, 但跨行和跨列的写法比较特殊, 必须写到 元素属性的位置: <td colSpan="2">01</td>

需要特别注意的是 row-span要写成rowSpan , col-span 要写成colSpan

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript父、子页面交互技巧总结
Aug 08 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
js常用DOM方法详解
Feb 04 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 #Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 #jQuery
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 #Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 #Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 #Javascript
关于微信小程序登录的那些事
Jan 08 #Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 #Javascript
You might like
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
PHP中串行化用法示例
2016/11/16 PHP
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
python面向对象 反射原理解析
2019/08/12 Python
如何通过python实现人脸识别验证
2020/01/17 Python
python如何删除列为空的行
2020/07/17 Python
python 监控logcat关键字功能
2020/09/04 Python
python tqdm库的使用
2020/11/30 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
党校学习自我鉴定
2014/02/24 职场文书
初婚未育证明样本
2014/10/24 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python