有没有办法让 table 行与最高 table 行的高度相同

Question

我试图使 table 行的高度与最高元素的高度相同，但没有固定值。使用 height auto 元素都是不同的高度，定义的值不是一个好的选择，因为高度很大的行的文本真的不稳定。

问题描述如图：

风格 + 我是如何制作的 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>

感谢您的帮助！

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;

我花了半个小时来编写这段代码，希望对您有所帮助。

有没有办法让 table 行与最高 table 行的高度相同

Is there a way to make table rows the same height as the highest table row

html

javascript

css

jquery

html-table