有沒有辦法使表格行與最高表格行具有相同的高度

Question

我試圖使表格行的高度與最高元素的高度相同，但沒有固定值。 使用高度自動，元素都是不同的高度，並且定義的值不是一個好的選擇，因為具有很多高度的行的文本確實不穩定。

問題描述為圖片：

風格+我如何制作桌子：

.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>

謝謝你的幫助！

Answer 1

將此 JavaScript 代碼復制到您的文件中，如果您在代碼中使用了 和 標記，一切都會正常工作。 並且還需要將 jQuery 與您的文件連接，因為我必須在兩者之間使用一些 jQuery。 使用它在頭部部分添加它 -

<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;

我希望它有所幫助，因為我花了半個小時來制作這段代碼。