HTML 表格 - 列的宽度不变

Question

我尝试调整以下 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;

}

Answer 1

className通过更改为class和元素<th>来让您的示例正常工作<div>！然后只需将 css 类更改为所需的宽度即可。