Question

我的html页面上有一张表格，该表格是使用有角但主要是HTMl和CSS制成的（请参见下面的代码段）。由于表格最终可能会变得很大，因此我们希望使表格能够滚动。那本身并不是什么大问题，只有一个值的表也不会引起任何问题。在对具有四个值的第二张表进行了一些摸索之后，不想和我一起工作。

我尝试了在另一张表上也使用过的css行。这可能是一件我现在想不起来的非常简单的事情。

这是只有一个值的表，并且工作正常。

y4

该表不起作用（我确实看到了缺少的td和th类，但是在每个td和th上有多行显示块并不是一个真正的解决方案）

<table class="table table-hover table-striped">
    <thead>
      <tr>
        <th>Locaties</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let location of locations | filterPipeDep: searchToken">
        <td (click)="SpecificLocation(location.departmentId)">{{location.departmentName}}</td>
      </tr>
    </tbody>
  </table>

table {
  -webkit-border-radius: 8px !important;
  -moz-border-radius: 8px !important;
  border-radius: 8px !important;
  background-color: rgba(245, 245, 245, 0.644);
  color: black;
}

thead {
  background-color: rgb(245, 245, 245);
  color: black;
}

tbody {
  display: block;
  overflow-y: auto;
  width: 100%;
  height: 350px;
}

tr {
  display: block;
  width: 100%;
}

td, th{
  text-align: center;
  display: block;
}

就像我说的那样，可能只是我只是想念或忽略的事情而已。我想看到的是表格能够以固定的标题上下滚动，文字排成一行，并使用100％宽度的表格。

如何确保表格正确排列

0 个答案: