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;">