在使用 Taro 开发富文本应用时,如果遇到富文本表格边框不显示的问题,通常是因为样式设置不当或者缺少相应的 CSS 样式
import { RichText } from "@tarojs/components"
import "./index.less"
interface Props {
value: string
}
const ElRichText: React.FC<Props> = ({ value }) => {
const processingNode = (node: any) => {
node = node.replace(/<table/g, '<table class="elc-table"')
node = node.replace(/<tr/g, '<tr class="elc-tr"')
node = node.replace(/<td/g, '<td class="elc-td"')
node = node.replace(/<p/g, '<p class="elc-text"')
return node
}
return (
<>
<RichText nodes={processingNode(value)} />
</>
)
}
export default ElRichText
.elc-table {
border-collapse: collapse; /* 边框合并 */
// border-spacing: 0 !important;
}
.elc-tr {
margin: 0 !important;
}
.elc-td {
text-align: center; /* 字体居中 */
border: 2rpx solid #000; /* 边框样式 */
font-size: 20rpx;
padding: 10rpx 4rpx;
margin: 0 !important;
}
.elc-text{
font-size: 24rpx;
line-height: 50rpx;
color: #000;
}