Bootstrap

react + antd实现表头居中对齐表体右对齐

项目中的一个需求,让表格内的金额数据靠右展示,其余都居中显示,那么表头肯定不能一块居右,因为其他表头都是居中的,偶尔一个居右影响美观。
刚开始设想的很好,所有表头统一设置的居中显示,那么表体单独设置居右就可以了

const columns = [
	{
         className: "columnHead",  //columnHead里面设置了居中的样式
         title: "预计费用",
         dataIndex: "yjfy",
         width: TableWidth.W70, //70
         render:(value,row)=><span style={{textAlign:'right'}}>{value ? value.toFixed(2):''}</span>
     },
]

如上代码,开始用了span标签,但由于span标签是行内元素,设置居中样式并不生效,后来改用p标签就生效了,p标签会自动占据整个td的宽度

const columns = [
	{
         className: "columnHead",  //columnHead里面设置了居中的样式
         title: "预计费用",
         dataIndex: "yjfy",
         width: TableWidth.W70, //70
         render:(value,row)=><p style={{textAlign:'right'}}>{value ? value.toFixed(2):''}</p>
     },
]
;