专栏首页木子昭的博客React 中合并单元格的正确写法

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vim的寄存器动作真是太酷了

    zhaoolee
  • 红了绿了什么的最有意思了

    在线展示地址: http://echarts.baidu.com/examples/editor.html?c=area-simple

    zhaoolee
  • GitHub与新人类

    2050年,人类迈入新人类文明时代 新人类与超级计算机(代号Github)共同进化,世界观也变得有趣 关于生命终结 旧人类 第一阶段 是医学上宣告死亡 第二...

    zhaoolee
  • HTML制作简约简历

    葆宁
  • 表格标签的使用

    表格包含三对HTML标签,分别为 <table></table>、<tr></tr>、<td></td>,他们是创建表格的基本标签,缺一不可

    星辰_大海
  • Python 技术篇-python生成html源码功能实现演示,html代码自动生成技巧。列表生成式的灵活应用。

    python之所以受欢迎就是因为它简单易用,而且很强大! python的列表生成式可以方便的生成我们想要的列表类型的数据,重点是我们想要的。

    小蓝枣
  • 贷款违约预测-Task2 数据分析

    此部分为零基础入门金融风控的 Task2 数据分析部分,带你来了解数据,熟悉数据,为后续的特征工程做准备,欢迎大家后续多多交流。

    致Great
  • JavaScript实例---表格隔行变色以及移入鼠标高亮

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>index</title> <style...

    用户1624346
  • 我的第六个网页制作:table标签

    1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 ...

    Angel_Kitty
  • 《HTML5实战》Lesson03

    Week03     2016/09/28上午1-4节 一、复习上节课内容: 二、自己完成登陆明细部分P43:代码清单2-3 1,<fieldset>、<leg...

    用户1733354

扫码关注云+社区

领取腾讯云代金券