时间戳

首页 > 解决方案 > 尽管定义了表格并应用固定表格布局，但表格的每一列都有不同的宽度

css - 尽管定义了表格并应用固定表格布局，但表格的每一列都有不同的宽度

问题描述

我有一个嵌套表，我在 html 中显示。我试图让每列 50% 宽度，但它不起作用。

过去当我需要这样做时，我会申请table-layout: fixed并且大部分时间它都有效，但这次它不起作用。

怎么了？ 编辑器链接

<table class="employment" *ngFor="let item of empTabData| slice:1">
                <div class="container" fxLayout="row " fxLayout.xs="column">
                    <div class="item-1 " fxFlex="50%" fxFlex.xs="100%">
                        <tr *ngFor="let i of item.employerInfo | slice:0:(item.employerInfo.length/2)+1">
                            <td class="emp">
                                {{i.key}}
                            </td>
                            <td class="emp">
                                {{i.value}}
                            </td>
                        </tr>
                    </div>
                    <div class="item-1" fxFlex="50%" fxFlex.xs="100% ">
                        <tr *ngFor="let i of item.employerInfo | slice:(item.employerInfo.length/2)+1:item.employerInfo.length">
                            <td class="emp">
                                {{i.key}}
                            </td>
                            <td class="emp">
                                {{i.value}}
                            </td>
                        </tr>
                    </div>
                </div>

            </table>

p {
  font-family: Lato;
}
.employment {
  border-collapse: collapse;
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
  font-size: 12px;
  font-weight: 500;
  margin: 1%;
  white-space: nowrap;
}
.employment tr:nth-child(even) {
 background: #fafafa;
}

.emp {
   width: 50%;
   white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


export class AppComponent  {
empTabData =  [{"employerInfo":[{"key":"UAN","value":"100460235222"}]},{"employerInfo":[{"key":"Matched Name","value":"UAT Test Aadhaar Name"},{"key":"User Id","value":"442ad831-983f-44ca-ac7f-e1851c911fb3"},{"key":"ID","value":"PYBOM00250170000001586"},{"key":"Employer","value":"EMIDS TECHNOLOGIES PVT LTD"},{"key":"Settled","value":"true"}]},{"employerInfo":[{"key":"Matched Name","value":"UAT Test Aadhaar Name"},{"key":"User Id","value":"442ad831-983f-44ca-ac7f-e1851c911fb3"},{"key":"ID","value":"PYKRP17189390000010001"},{"key":"Employer"},{"key":"Settled","value":"false"}]}]
}

标签： cssangular

解决方案

当我更改为时，它对我有用table-layout: fixed;

tbody{
  width: 100%;
  display:table;
  table-layout: fixed;
}
p {
  font-family: Lato;
}
.employment {
  border-collapse: collapse;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
  font-size: 12px;
  font-weight: 500;
  margin: 1%;
}
.employment tr:nth-child(even) {
 background: #fafafa;
}

.emp {
   width: 50%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

结果

希望我的回答对你有帮助！:)

推荐阅读