React中如何合并单元格
这篇文章主要介绍“React中如何合并单元格”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“React中如何合并单元格”文章能帮助大家解决问题。
目前创新互联已为成百上千的企业提供了网站建设、域名、网站空间、网站改版维护、企业网站设计、播州网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
react组件文件
import React, { Component } from 'react'; import './App.css'; class App extends Component { render() { return (); } } export default App;4*4表格
00 01 02 03 10 11 12 13 20 21 22 23 30 31 32 33
跨列写法(colSpan="2")
00 01 03 10 11 12 13 20 21 22 23 30 31 32 33
跨行写法(rowSpan="2")
00 01 02 03 10 12 13 20 21 22 23 30 31 32 33
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对象的形式, 但跨行和跨列的写法比较特殊, 必须写到 元素属性的位置: 01
需要特别注意的是 row-span
要写成rowSpan , col-span
要写成colSpan
关于“React中如何合并单元格”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。
新闻标题:React中如何合并单元格
文章源于:http://scyanting.com/article/jideoo.html