How to set table cells to the same with all-CodePudding

I have created a table, where the <tr> are in display: table-cell, the problem is that I dont know how to make them grow all equaly.

I need to make my table like this, because this table its created through a foreach loop with angular, so each <tr> tag its a column

And my result its something like this:

So, how can I make them all have the same heigth and width?

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 40px;
}

table .header {
  display: table-cell;
}

table .header td {
  display: block;
}

<table>
  <tr  *ngFor="let header of superficieColumnHeaders">
    <td>Column name</td>
    <td id="header-name">Another Value</td>
    <td id="body-value">Some specific Value</td>
  </tr>
  <tr  *ngFor="let header of superficieColumnHeaders">
    <td>Column name</td>
    <td id="header-name">Another Value</td>
    <td id="body-value">Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value </td>
  </tr>
</table>

CodePudding user response：

You can manually set height: 60px in css

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 40px;
}

table .header {
  display: table-cell;
}

table .header td {
  display: block;
  height: 60px
}

<table>
  <tr  *ngFor="let header of superficieColumnHeaders">
    <td>Column name</td>
    <td id="header-name">Another Value</td>
    <td id="body-value">Some specific Value</td>
  </tr>
</table>

CodePudding user response：

Use table-layout: fixed; to set all columns to the same width regardless of their content.

If you "misuse" the css you do it to let table rows act like cells, there won't be a way to get equal heights , I guess.

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 40px;
  table-layout: fixed;
}

table .header {
  display: table-cell;
}

table .header td {
  display: block;
  border: 1px solid #ddd;
}

<table>
  <tr  *ngFor="let header of superficieColumnHeaders">
    <td>Column name</td>
    <td id="header-name">Another Value</td>
    <td id="body-value">Some specific Value</td>
  </tr>
  <tr  *ngFor="let header of superficieColumnHeaders">
    <td>Column name</td>
    <td id="header-name">Another Value</td>
    <td id="body-value">Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value Some specific Value </td>
  </tr>
</table>