详解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 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
利用JS如何获取form表单数据
Dec 19 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
PHP中的integer类型使用分析
2010/07/27 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
php实现微信支付之企业付款
2018/05/30 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
JS中定位 position 的使用实例代码
2017/08/06 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
几款好用的python工具库(小结)
2020/10/20 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
学校介绍信范文
2014/01/14 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
学习交流会主持词
2014/04/01 职场文书
国庆宣传标语
2014/06/30 职场文书
2016十一国庆节感言
2015/12/09 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android