javascript - 如何保持表格单元格的宽度相同？

Question

所以我目前正在使用一个动态表，当您从下拉菜单中选择元素时，它会呈现一个元素列表。我遇到的问题是有些元素扭曲了表格中单元格的宽度，即使我为每个元素指定了最大宽度。当您的 header 与不同的列表不匹配时，这显然很麻烦。

我以前在创建这样的表时从来没有真正遇到过任何问题，但也许我在这里遗漏了一些东西。

这是渲染表格的方法

RenderTable(items){
        var rows = [];
        let itemList = this.state.ItemList;

        for(let i = 0; i < items.length; i++){
            for(let j = 0; j < itemList.length; j++){
                if(items[i].ID == itemList[j].ID){
                    rows.push(
                        <tr style={{backgroundColor: '#B7BCDF'}} id={items[i].ID} key={i}>
                            <td style={{maxWidth: '20px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}} id={items[i].ID}>
                                {itemList[j].PartName}
                            </td>
        
                            <td  style={{maxWidth: '20px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}} id={items[i].ID}>
                                {itemList[j].Description}
                            </td>
        
                            <td  style={{maxWidth: '20px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}} id={items[i].ID}>
                                {itemList[j].Type}
                            </td>
        
                            <td  style={{maxWidth: '20px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}} id={items[i].ID}>
                                {items[i].Quantity}
                            </td>
        
                            <td  style={{maxWidth: '20px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}} id={items[i].ID}>
                                {itemList[j].Units}
                            </td>
                        </tr>
                    ) 
                }
            }     
        }
        return (

            <div className="TableScroll" style={{width: '74.5%'}}>
                <table className="TableRows">
                    <tbody>
                        {rows}
                    </tbody>
                </table>
            </div>

        );
    }

这是该表的 html

<div className="ParTableContainer">
                    <table className="PartTableHeaderContainer" style={{textAlign: 'center'}}>
                        <thead>
                            <tr>
                                <th style={{width: '20%'}}>Part Name</th>
                                <th style={{width: '20%'}}>Description</th>
                                <th style={{width: '20%'}}>Type</th>
                                <th style={{width: '20%'}}>QTY</th>
                                <th style={{width: '20%'}}>U/M</th>
                            </tr>
                        </thead>
                    </table>
                </div>

                {this.RenderTable(this.state.PartList)}

这是我的 css 文件，其中包含一些样式

.PartTableHeaderContainer{
    border: 2px solid var(--Blue);
    background-color: var(--Blue);
    color: white;
    text-align: center;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.TableRows{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.TableRows tr:hover td{
    background-color: var(--AccentBlue);
    color: white;
    cursor: pointer;
}

.ParTableContainer{
    width: 75%;
    background-color: blue;
    margin-right: auto;
    margin-left: auto;
}


.TableScroll{
    width: 1036px;
    height: 60%;
    border: 2px solid;
    overflow: auto;
    margin-right: auto;
    margin-left: auto;
}

这是我正在谈论的一些图片

这是我认为表格的结果:

然后到处都是这个:

如果有人有任何建议，请告诉我!谢谢。

Answer 1

设置table-layout: fixed在你的 <table>元素(将其添加到 .PartTableHeaderContainer 和 .TableRow 类或按照其他人的建议合并表)。

有关属性说明，请参见此处:https://css-tricks.com/almanac/properties/t/table-layout/

fixed: With this value, the table's layout ignores the content and instead uses the table's width, any specified width of columns, and border and cell spacing values. The column values used are based on widths defined on columns or cells for the first row of the table.

此外，从表格元素中删除内联样式，而是将它们添加到 div里面的 wrapper 。像这样:

 <td id={items[i].ID}>
    <div style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>
        {items[i].Quantity}
    </div>
 </td>