详解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 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
Vue响应式原理详解
Apr 18 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 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获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
php eval函数一句话木马代码
2015/05/21 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
JQuery 弹出框定位实现方法
2010/12/02 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
python批量提交沙箱问题实例
2014/10/08 Python
Python版微信红包分配算法
2015/05/04 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
python多线程扫描端口(线程池)
2019/09/04 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
党风廉设责任书
2014/04/16 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
六查六看心得体会
2014/10/14 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
如何写新闻稿
2015/07/18 职场文书
小学班主任研修日志
2015/11/13 职场文书