0

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: enter image description here

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!

Schwoaz1802
  • 35
  • 10

1 Answers1

0

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.

  • Thanks for your Solution! I was just wondering which jquery version you are using. I never used jquery before and don't know if I should just download the newest version or use a external source from google. – Schwoaz1802 Jul 27 '21 at 06:15
  • Yes I have edited the answer. Add that in the head section. –  Jul 27 '21 at 07:06
  • I tried your code and it isn't correctly working for me. I made an alert after every line and this works till "var rows = table.getElementsByTagName("tr");". I tried to find out why and tried "alert (table);" after "var table = document.getElementsByTagName("table")[0];". Well it alerts me "undefined". I'm new in website development and was wondering what the problem could be. If you need code from me please tell me. Thanks for your patience! – Schwoaz1802 Jul 27 '21 at 07:30
  • Pls edit your question and send the code you are using to make such a table. I will make the code compatible with it. –  Jul 30 '21 at 03:31
  • Why do you include jQuery if you don't use it? – Styx Jul 30 '21 at 06:37
  • Added how I make the tables :) – Schwoaz1802 Jul 30 '21 at 06:39
  • Try it again. If it still not helps then it may be issue of styling or something... –  Aug 01 '21 at 12:47
  • I am using jquery in between... For very small part.. Though it saved me the hassle to create my own function for that thing... –  Aug 02 '21 at 06:08
  • I maybe found the problem with your code... Your webpage must have more than 1 tables... In that case you simply have to replace value in the table variable and put a id to that table... The value for it would then be document.getElementById(tableid); –  Aug 02 '21 at 06:11
  • Solved it by adding more tables with an id! Thank you for your help :) – Schwoaz1802 Aug 03 '21 at 08:15
  • No problem. Pls Vote the answer if u liked it. –  Aug 08 '21 at 13:59