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

Question

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

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

这是渲染表格的方法

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/

固定：使用此值，表格的布局会忽略内容，而是使用表格的宽度、任何指定的列宽度以及边框和单元格间距值。使用的列值基于在表格第一行的列或单元格上定义的宽度。

此外，从表格元素中删除内联样式，并将它们添加到div内部的包装器中。像这样：

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

Answer 2

您创建了一个两个表，因此您可以有一个固定的标题和一个可滚动的内容。您可以将此代码片段用作如何执行此操作的示例。

<html>
<head>
<title>Fixed Header Table</title>
<style>
  .PartTableHeaderContainer th{
    width: 20%;
    background-color: blue;
  }

  .TableScroll td{
    width: 20%;
  }
</style>
</head>
<body>

<table cellspacing="0" cellpadding="0" width="525">
  <tr>
    <td>
       <table class="PartTableHeaderContainer" cellspacing="0" cellpadding="1" border="1" width="500" >
         <tr style="color:white;background-color:grey">
          <th>Part Name</th>
          <th>Description</th>
          <th>Type</th>
          <th>QTY</th>
          <th>U/M</th>
         </tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>
       <div style="width:520px; height:80px; overflow:auto;">
         <table cellspacing="0" cellpadding="1" border="1" width="500" class="TableScroll">
          <tr>
            <td>Sample Part</td>
            <td>This is a sample part</td>
            <td>Sample Type</td>
            <td>100</td>
            <td>ft</td>
          </tr>
          <tr>
              <td>Sample Part</td>
              <td>This is a sample part</td>
              <td>Sample Type</td>
              <td>100</td>
              <td>ft</td>
          </tr>
          <tr>
              <td>Sample Part</td>
              <td>This is a sample part</td>
              <td>Sample Type</td>
              <td>100</td>
              <td>ft</td>
          </tr>
          <tr>
              <td>Sample Part</td>
              <td>This is a sample part</td>
              <td>Sample Type</td>
              <td>100</td>
              <td>ft</td>
          </tr>
          <tr>
              <td>Sample Part</td>
              <td>This is a sample part</td>
              <td>Sample Type</td>
              <td>100</td>
              <td>ft</td>
          </tr>
         </table>
       </div>
    </td>
  </tr>
</table>
</body>
</html>

或者你可以像这样使用一张桌子

<html>
<head>
<title>Sample</title>
<style>
table tbody, table thead
{
    display: block;
}

table tbody
{
   overflow: auto;
   height: 100px;
}

table {
    width: 445px;
    border-spacing: 1px;
}

th
{
    width: 80px;
    border: 1px;
    border-style: solid;
}
td
{
    width: 80px;
    border: 1px;
    border-style: solid;
}
</style>
</head>
<body>

    <table>
        <thead>
            <tr>
              <th>Part Name</th>
              <th>Description</th>
              <th>Type</th>
              <th>QTY</th>
              <th>U/M</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>Sample Part</td>
              <td>This is a sample part</td>
              <td>Sample Type</td>
              <td>100</td>
              <td>ft</td>
            </tr>
            <tr>
                <td>Sample Part</td>
                <td>This is a sample part</td>
                <td>Sample Type</td>
                <td>100</td>
                <td>ft</td>
            </tr>
             <tr>
                <td>Sample Part</td>
                <td>This is a sample part</td>
                <td>Sample Type</td>
                <td>100</td>
                <td>ft</td>
            </tr>
             <tr>
                <td>Sample Part</td>
                <td>This is a sample part</td>
                <td>Sample Type</td>
                <td>100</td>
                <td>ft</td>
            </tr>
            <tr>
                <td>Sample Part</td>
                <td>This is a sample part</td>
                <td>Sample Type</td>
                <td>100</td>
                <td>ft</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Answer 3

我看到你必须在下面放几张桌子，为什么不把所有东西都放在一张桌子上呢？

      <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>
                    <tbody>
                      {rows}
                    </tbody>
       </table>