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>

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

3 个答案: