详解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 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
JS数组方法join()用法实例分析
Jan 18 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多个字符串替换成同一个的解决方法
2013/06/18 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
如何在PHP中使用数组
2020/06/09 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Golang与python线程详解及简单实例
2017/04/27 Python
Django中的ajax请求
2018/10/19 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
python变量的存储原理详解
2019/07/10 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
音乐专业应届生教师求职信
2013/11/04 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
工作自我评价范文
2015/03/05 职场文书
施工安全员岗位职责
2015/04/11 职场文书
python基础之模块的导入
2021/10/24 Python