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

上述内容就是React中怎么合并单元格，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。