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

Posted 2023-03-06

【中文标题】HTML 表格 - 列的宽度不会改变

【英文标题】：HTML table - Width of columns does not change

【发布时间】：2020-07-29 22:12:36

【问题描述】：

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

我尝试了@RonDeVera 建议的方法，但它不起作用：***

            <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;

【参考方案1】：

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

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

【讨论】：

我认为这是 JSX（使用 className），而不是 HTML。

可能——或许原作者可以澄清一下。