详解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学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
JavaScript组合继承详解
Nov 07 Javascript
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 Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
PHP学习记录之数组函数
2018/06/01 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
python/golang 删除链表中的元素
2020/09/14 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
教师产假请假条
2014/04/10 职场文书
普通党员对照检查材料
2014/08/28 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
党支部先进事迹材料
2014/12/24 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js