HTML 表格 - 列的宽度不会改变答案

【问题标题】：HTML table - Width of columns does not changeHTML 表格 - 列的宽度不会改变
【发布时间】：2020-07-29 22:12:36
【问题描述】：

我尝试调整以下 HTML 表格中的列宽，但没有成功。背景颜色正在改变，但宽度没有改变。任何想法我做错了什么？

我尝试了@RonDeVera 建议的方法，但它不起作用：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;
}

【问题讨论】：

标签： html css

【解决方案1】：

通过将 <th> 和 <div> 元素上的 className 更改为 class 让您的示例正常工作！

然后只需将您的 css 类更改为所需的宽度。

【讨论】：

我认为这是 JSX（使用 className），而不是 HTML。
可能——或许原作者可以澄清一下。