有没有办法使表格行与最高表格行具有相同的高度

Question

I was trying to make table rows all the same height as the highest element, without a fixed value. With height auto the elements are all different height and a defined value isn't a good choice because the text of the row with much height is really unsteady.

Description of the problem as image:

Style + how I make the table:

.Tright {
    width: 33%;
    height: auto;
    float: right;
}

 <table class="Tright" > 
  <tr>
    <th>Nachname:</th>
    <td><?php echo $data['Nachname']; ?></td>
  </tr><tr>
    <th>Funktion:</th>
    <td><?php echo $data['Funktion']; ?></td>
  </tr><tr>
    <th>Funktionsbezeichnung:</th>
    <td><?php echo $data['Funktionsbezeichnung']; ?></td>
  </tr><tr>
    <th>Telefonnummer:</th>
    <td><?php echo $data['Telefonnummer']; ?></td>
  </tr><tr>
    <th>E-Mail:</th>
    <td><?php echo $data['E-Mail']; ?></td>
  </tr><tr>
    <th>Beschreibung:</th>
    <td><?php echo $data['Beschreibung']; ?></td>
  </tr>

</table>

Thanks for your help!

Answer 1

Copy this JavaScript code into your file and everything will work fine provided you have used and tags in your code. And also need to connect jQuery with your file as I had to use some jQuery in between. Use this to add it in head section-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


var rows1 = [];
    var table = document.getElementsByTagName("table")[0];
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        rows1.push($(rows[i]).height());
    }
    var max = rows1.reduce(function(a, b) {
    return Math.max(a, b);
}, 0);
        document.getElementsByTagName("body")[0].innerHTML = "<style>table tr { height: " + max + "px !important; }</style>" + document.getElementsByTagName("body")[0].innerHTML;

I hope it helps as it took me half hour to make this code.