How to Use a CSS Class to Style an Element?-CodePudding

The style <table style="width:100%; line-height:1px"> of the table is repeated: I tried to create a .scss file and add a class style and use it in HTML

<div style="display: flex;">
    <table style="width:100%; line-height:1px">
        <thead>
            <tr>
                <th>A</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>100</td>
            </tr>
        </tbody>
    </table>

    <table style="width:100%; line-height:1px">
        <thead>
            <tr>
                <th>B</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>200</td>
            </tr>
        </tbody>
    </table>
</div>

I add this part to the .scss* file and I removed the style from the table tag but this does not work for me

table {
width:100%;
line-height:1px;
}

CodePudding user response：

The solution is to add the a styles array property to the @component

CodePudding user response：

It probably easier to use simple css to start rather than sass (change your style file extension to .css as said in the comment) Otherwise your problem might come from different things

Maybe your link to your style sheet doesn't work: make sure that you have that line in the head of your html file

<link rel='stylesheet' href='YourStylesheetName.css'>

You can also set css properties by adding them in the html file between two style tags like this

<style>
table {
width:100%;
line-height:1px;
}
</style>

Maybe the code works but it is not the result you expected : you can click on F12 to see the css properties on each element of a webpage.

Hope this helped.