用表格进行页面布局，页面布局在各种浏览器的的兼容性，都非常好，而在反应中使用表格布局，合并单元格的写法比较特殊，博主查了很久才找到正确的写法，在这里分享一下

效果图

源码

反应组件文件

从"反应"导入反应{组件};"进口"。/app。CSS '；类应用扩展组件{ render(){ return(div。App ' div。名称=' title ' 4 * 4表格/div表t车身TRT d00/TDT d01/TDT d02/TDT d03/TD/tr TRT D10/TDT d11/TDT d12/TDT d13/TD/tr TRT d20/TDT d21/TDT d22/TDT d23/TD/tr TRT d30/TDT d31/TDT d32/TDT d33/TD/tr/t车身/表hr/div类名='title '跨列写法(colSpan='2')/div表t车身TRT d00/tdtd ColSPan=' 2 ' 01/TDT d03/TD/tr TRT D10/TDT d11/TDT d12/TDT d13/TD/tr TRT d20/TDT d21/TDT d22/TDT d23/TD/tr TDT d30/TDT d31/TDT d32/TDT d33/TD/tr/t车身/表hr/div类名='title '跨行写法(rowSpan='2')/div表t车身TRT d00/tdtd row SPan=' 2 ' 01/TDT d02/TDT d03/TD/tr TRT D10/TDT d12/TDT d13/TD/tr TRT d20/TDT d21/TDT d22/TDT d23/TD/tr TDT d30/TDT d31/TDT d32/TDT d33/TD/tr/t车身/表HR//div)；} }导出默认AppApp.css。app { text-align : center}td { border: 1px固体# AB3319宽度： 30px高度：30px }。title { color : # 444444 font-size : 20px；margin: 20px}表{ margin: 20px auto边界崩溃：崩溃；}小结：

反应的样式一般都写成射流研究…对象的形式，但跨行和跨列的写法比较特殊，必须写到元素属性的位置： td colSpan='2'01/td

需要特别注意的是行跨度要写成行跨度，列跨度要写成跨列数

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。