详解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 相关文章推荐
浅析tr的隐藏和显示问题
Mar 05 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 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 实现多服务器共享 SESSION 数据
2009/08/15 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
Python中用于计算对数的log()方法
2015/05/15 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Python读取指定日期邮件的实例
2019/02/01 Python
Python 实现进度条的六种方式
2021/01/06 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
.NET面试问题集
2015/12/08 面试题
如何理解transaction事务的概念
2015/05/27 面试题
考博专家推荐信模板
2013/12/02 职场文书
行政主管职责范本
2014/03/07 职场文书
岗位聘任书范文
2014/03/29 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
毕业设计论文评语
2014/12/31 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL
Python字符串常规操作小结
2022/04/03 Python