HTML table - Width of columns does not change

Question

I try to adjust the width of the columns on the following HTML table with no much success. Background color is changing but not the width. Any ideas what I am doing wrong?

I tried the approach that was suggested by @RonDeVera but it doesn't work: stackOverflow

            <table>
                <thead>
                    <tr>
                        <th className="table_ulr"><div className="url_header">URL</div></th>
                        <th className="table_content"><div className="content_header">Content</div></th>
                    </tr>
                </thead>
                <tbody>
                    {likelyResults.map(i => {
                        return (
                            <AdvancedLikelyResultItem
                                sourceUrl={i.sourceUrl}
                                content={i.content}
                            />
                        );
                    })}
                </tbody>
            </table> 

CSS

table {
    width: 100%;
}

.table_ulr {
    width: 30%;
    //background-color: orangered;
}

.table_content {
    width: 70%;
    //background-color: blue;
}

.url_header {
    left: 12px;
    right: 14px;
    top: 0px;
    font-family: Arial;
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.2px;
    color: #4d636c;
}

.content_header {
    left: 12px;
    right: 14px;
    top: 0px;
    font-family: Arial;
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.2px;
    color: #4d636c;
}

Answer 1

Got your example working by changing className to class on the <th> and <div> elements!

Then just change your css classes to the desired width.