Render HTML Table in react native-CodePudding

In my project, I've used react-native-render-html to render the html. But the table content is not displayed correctly.

import RenderHtml from 'react-native-render-html';
import { WebView } from 'react-native-webview';

const html = `
        <html>
        <head></head>
            <body>
            <style>
                table, th, td {
                    border:1px solid black;
                }
            </style>

            <table style="width:100%">
                <tr>
                <td>Emil</td>
                <td>Tobias</td>
                <td>Linus</td>
                </tr>
                <tr>
                <td>16</td>
                <td>14</td>
                <td>10</td>
                </tr>
            </table>
            </body>
        </html>
    `;

    const webViewProps = {
        originWhitelist: "*"
    };

    return (
        <View style={{ flex: 1 }}>
            <RenderHtml
                source={{ html }}
                WebView={WebView}
                defaultWebViewProps={webViewProps}
            />
        </View>
    );

Click to view result

Can someone give me advice on how to solve this problem? I have html table data which is generated by Ckeditor from my website, so I have to find the way to handle.

CodePudding user response：

https://meliorence.github.io/react-native-render-html/docs/guides/styling

Reading Their guide on styling, I didn't find an example of styling the HTML elements with a <style> tag, instead they offer a few props, like classesStyles, idsStyles or tagsStyles to target the elements inside the HTML. (also the css should be CSS in JS)

Unfortunately, none of the above props actually worked, the only way I was able to handle it was to pass inline styles.