borderwidth not showing in right side and bottom side in Table.

[Jigs6720]

in the right side and bottom side border is not showing here is the code.

<RenderHTML
        contentWidth={width}
        source={{
          html: html,
        }}
        renderers={{ table: TableRenderer }}
        WebView={WebView}
        renderersProps={{
          table: {
            computeContainerHeight() {
              return null;
            },
            webViewProps: {
              style: {
                backgroundColor: "transparent",
                marginVertical: 10,
                alignItems: "center",
                borderWidth: 1,
                borderColor: "lightgray",
              },
              nestedScrollEnabled: true,
              scalesPageToFit: true,
              bounces: false,
            },
          },
          a: {
            onPress(event, url, htmlAttribs, target) {
              // Do stuff
              if (url) {
                openLink(url, colors.text, colors.background);
              }
            },
          },
        }}
        customHTMLElementModels={{
          table: tableModel
        }}
        systemFonts={[
          Typography.MuseoSansRegularText,
          Typography.MuseoSansBoldText,
        ]}
        enableCSSInlineProcessing={enableCSSInlineProcessing}
        baseStyle={contentHeight && { minHeight: contentHeight }}
        tagsStyles={{
          body: {
            // width: "96%",
            paddingHorizontal: 10,
            fontWeight: "400",
            fontFamily: Typography.MuseoSansRegularText,
            lineHeight: 24,
            alignSelf: "center",
            fontSize: 16,
            color: colors.text,
            ...bodyStyle,
          },
          p: {
            fontWeight: "400",
            fontFamily: Typography.MuseoSansRegularText,
            lineHeight: 24,
            fontSize: 16,
            color: colors.text,
            marginVertical: 0,
            ...paragraphStyle,
          },
          span: {
            fontWeight: "400",
            fontFamily: Typography.MuseoSansRegularText,
            lineHeight: 24,
            fontSize: 16,
            color: colors.text,
          },
          div: {
            fontWeight: "400",
            fontFamily: Typography.MuseoSansRegularText,
            lineHeight: 24,
            fontSize: 16,
            color: colors.text,
          },
          img: {
            width: imgWidth || "100%",
            resizeMode: "contain",
            alignItems: "center",
          },
          table: commonStyles.table(colors),
          tbody: commonStyles.tbody(colors),
          td: commonStyles.td(colors),
          tr: commonStyles.tr(colors),
          th: commonStyles.th(colors),
          thead: commonStyles.thead(colors),
          tbody: commonStyles.tbody(colors),
        }}
      />

[Ajololr]

We are experiencing the same issue. For some reason setting outerBorderWidthPx to -1 fixed the problem in our case. But it is not an expected behaviour

import {
  cssRulesFromSpecs,
  defaultTableStylesSpecs,
} from '@native-html/table-plugin';

... 

<RenderHTML
      ...
      renderersProps={{
        table: {
          cssRules: cssRulesFromSpecs({
            ...defaultTableStylesSpecs,
            outerBorderWidthPx: -1,
          }),
        },
      }}
    />

[DeepakSharma04]

Hi @Ajololr how i can remove width in the table style.

<table cellspacing="0" cellpadding="0" border="1" style="font-size:10pt; font-family:Arial;width:0px; border-collapse:collapse; border:none;">