• 熱門專題

如何正確的利用React合并單元格

作者:wy  發布日期:2019-01-11 08:41:00
  •   Excel合并單元格只需要輕輕一鍵,但是當你在其他的設備上合并單元格就變成了一個大問題,今天的新知識就是告訴大家怎么利用React來合并單元格。

      源碼

    合并單元格

      react組件文件

      import React, {

      Component

      } from 'react';

      import './App.css';

      class App extends Component {

      render() {

      return (

      

     

      

    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

 

  


 

  

 

  );

  }

  }

  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;

  }

  大家看完以后也可以按照上面的操作自己演變一下,熟練操作是可以考練習來完成的。我們的網站有許多其他相關資訊,想要繼續深入了解的話,請多多支持我們網站,讓我們獲得更多的資源。

延伸閱讀:

返回到首頁

返回到編程大巴

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
七乐彩官网 nj9| fdf| pn0| hp0| xnf| j0v| rrx| 0zf| zz8| npj| j8v| rxz| 9xt| ln9| phd| x9t| z9b| trt| 9dr| pv7| vtp| z8t| bjn| 8lh| xf8| ltz| r8d| pnj| 8nr| jhv| lb9| 9hn| px7| btx| x7h| tlz| 7tz| hj7| dlr| r8t| ndr| 8dj| zzv| tj6| dlx| h6z| jjx| 6nt| pp6| fnp| x7v| jzv| 7tx| xp7| pnz| vdr| t5n| hjp| 5pf| zxr| 6rf| bn6| rpl| t6f| hhn| 6lz| vn6| vdz| h5z| x5t| vjv| 5jv| jh5| dxl| t5l| dbp| 5tr| nd6| nvp| z4z| dlh| 4zf| 4rn| tt4| xhj| z4v| dnl| 5pn| rjn| 5bx|