詳解React中合并單元格的正確寫(xiě)法
更新時(shí)間：2019年01月08日 10:07:25 作者：木子昭
用表格進(jìn)行頁(yè)面布局,頁(yè)面布局在各種瀏覽器的的兼容性, 本文主要介紹了詳解React中合并單元格的正確寫(xiě)法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
用表格進(jìn)行頁(yè)面布局,頁(yè)面布局在各種瀏覽器的的兼容性, 都非常好, 而在react中使用表格布局, 合并單元格的寫(xiě)法比較特殊, 博主查了很久才找到正確的寫(xiě)法, 在這里分享一下
效果圖
源碼
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">跨列寫(xiě)法(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">跨行寫(xiě)法(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;
}
小結(jié):
React的樣式一般都寫(xiě)成js對(duì)象的形式, 但跨行和跨列的寫(xiě)法比較特殊, 必須寫(xiě)到 元素屬性的位置: <td colSpan="2">01</td>
需要特別注意的是 row-span要寫(xiě)成rowSpan , col-span 要寫(xiě)成colSpan
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
路由的配置文件目前我們所有的路由定義都是直接使用Route組件，并且添加屬性來(lái)完成的，路由的參數(shù)傳遞有二種方式這，兩種方式在Router6.x中都是提供的hook函數(shù)的API,?類組件需要通過(guò)高階組件的方式使用，本文通過(guò)示例代碼詳解講解，需要的朋友參考下吧2022-11-11
這篇文章主要介紹了React組件之多選Checkbox實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-10-10
這篇文章主要給大家介紹了關(guān)于React中阻止事件冒泡問(wèn)題的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用React具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
create-react-app構(gòu)建項(xiàng)目慢的解決方法
這篇文章主要介紹了create-react-app構(gòu)建項(xiàng)目慢的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了React如何避免重渲染，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
React和Vue實(shí)現(xiàn)文件下載進(jìn)度條
本文主要介紹了React和Vue實(shí)現(xiàn)文件下載進(jìn)度條，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
淺談箭頭函數(shù)寫(xiě)法在ReactJs中的使用
這篇文章主要介紹了淺談箭頭函數(shù)寫(xiě)法在ReactJs中的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家介紹了React useState的錯(cuò)誤用法避坑詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
詳解React?ISR如何實(shí)現(xiàn)Demo
這篇文章主要為大家介紹了React?ISR如何實(shí)現(xiàn)Demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要為大家介紹了react函數(shù)組件類組件區(qū)別示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08