Question

我有一个嵌套表，该表在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"}]}] }，但这次却不起作用。

怎么了？ editor link

<?php
$checkVariable = true;
$arrayA = array("23", "34", "56");
$arrayB = array("23");

foreach($arrayA as $an) {
    if(in_array($an, $arrayB)) {
        $checkVariable = false;
    }
}

print_r($checkVariable);
//var_dump($checkVariable);

Answer 1

您的肢体没有显示装置，宽度也不是100％。所以试试这个：

tbody {
width: 100%;
display: table;

}

Answer 2

当我更改为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;
}

How to disable status bar click and pull down in Android?

希望我的回答对您有所帮助！：）

Answer 3

您不能将<div>作为<table>的直接子代。 https://html.com/tables/您必须从这样的东西开始绘制表格。

<table class="employment" *ngFor="let item of empTabData| slice:1">   
    <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>

    <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>
</table>

例如，仅通过删除div，td.emp的大小（当它们有足够的空间可以这样做时）为50％。

尽管定义了表格并应用固定的表格布局，表格的每一列仍具有不同的宽度

3 个答案: