html tableタグ内の行の高さを固定したい
Angularを使用しています。
解決したいこと
tableタグのheightを行が5行表示できるくらいに設定する。
そして、その中に表示される行が5行に満たない場合でも（height / 5）の高さで上詰めで表示したいです。
また、値が入っている行の部分については色を付けたいのですが
値がない部分については白にしたいため背景色を白くしたいです。
何卒宜しくお願い致します。
発生している問題・エラー
table内に表示する行が5行未満の時、行が（height / 5）の高さではなく
（height / 行数）の値になってしまっている
該当するソースコード
<table>
<tr>
<th>ID</th>
<th>果物</th>
</tr>
<ng-container *ngFor="let detail of list">
<tr>
<td>{{detail.id}}</td>
<td>{{detail.value}}</td>
</tr>
</ng-container>
</table>
table {
table-layout: fixed;
width: 50%;
height: 250px;
background-color: coral;
border: 1px lightgray solid;
}
export class TableTest {
list: {
id: string;
value: string;
}[] = [];
ngAfterViewInit(): void {
this.list[0] = { id: '1', value: 'banana' };
this.list[1] = { id: '2', value: 'orange' };
}
}
自分で試したこと
・tr、td、thのタグにcssでheight: calc(100%/5);を設定してみたのですが変わりませんでした。
・5行に満たないとき、5行になるように行を追加しようと思ったのですが
今後5行以上の時は次ページに表示させるようにしたいため、ページが切り替わったときに表示されている行が5行未満という条件がhtmlで記述できるかわからず断念しました。
（そのためcssで設定できるなら…と思った次第です）
0 likes
