You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为react-native-markdown-display表格表头行修改下边框颜色?

解决react-native-markdown-display表头下边框样式问题

要修改表头行的下边框颜色,你需要在自定义样式中针对thead、th或表头行的tr元素单独设置边框样式,仅修改table的样式无法覆盖表头区域的边框。

修改后的代码示例

{props.message && (
  <Markdown
    style={{
      table: {
        borderColor: "white",
        color: "yellow",
        borderBlockEndColor: "yellow",
        borderStartColor: "yellow",
        borderEndColor: "yellow",
      },
      // 针对表头容器设置下边框
      thead: {
        borderBottomColor: "yellow",
        borderBottomWidth: 1, // 必须设置宽度,否则边框不显示
      },
      // 可选:针对表头单元格单独设置边框和文字样式
      th: {
        borderBottomColor: "yellow",
        borderBottomWidth: 1,
        color: "yellow",
      },
    }}>
    {`
# h1 Heading
## h2 Heading
  ### h3 Heading
  #### h4 Heading
  ##### h5 Heading
  ###### h6 Heading 

  Unordered

  + Create a list by starting a line with 
  + Sub-lists are made by indenting 2 spaces:
    - Marker character change forces new list start:
      * Ac tristique libero volutpat at
      + Facilisis in pretium nisl aliquet
      - Nulla volutpat aliquam velit
  + Very easy!

  Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa

  Start numbering with offset:

  57. foo
  58. bar



  | Option | Description |
  | ------ | ----------- |
  | data   | path to data files to supply the data that will be passed into templates. |
  | engine | engine to be used for processing templates. Handlebars is the default. |
  | ext    | extension to be used for dest files. |

  Right aligned columns

  | Option | Description |
  | ------:| -----------:|
  | data   | path to data files to supply the data that will be passed into templates. |
  | engine | engine to be used for processing templates. Handlebars is the default. |
  | ext    | extension to be used for dest files. |
`}
  </Markdown>
)}

说明

react-native-markdown-display的样式系统支持对Markdown的细分元素(如thead、th、tr)单独配置样式。表头的下边框默认绑定在thead容器或th单元格上,因此仅修改table的样式无法作用于这个区域。通过给thead或th设置borderBottomColor和borderBottomWidth,即可自定义表头下边框的样式。

内容的提问来源于stack exchange,提问作者Hilal Oruç

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.25 01:45:02