It is necessary to make so that when changing the size of the main window, all three tables remain the same size (due to the fact that the words are transferred depending on the width, the tables change their size).

<link href="http://www.w3schools.com/w3css/2.6/w3.css" rel="stylesheet" /> <div class="w3-row-padding w3-padding-24"> <div class="w3-third w3-hover-shadow w3-light-grey w3-bordered"> <table class="w3-table w3-bordered w3-striped"> <tr> <th class="w3-center w3-padding-24"> <h5>Первая консультация</h5> </th> </tr> <tr> <td class="w3-center w3-padding-24">Jill</td> </tr> <tr> <td class="w3-center w3-padding-24">Eve</td> </tr> <tr> <td class="w3-center w3-padding-24">Adam</td> </tr> <tr> <td class="w3-center w3-padding-24"> <button class="w3-btn w3-teal w3-padding-large">Подробнее</button> </td> </tr> </table> </div> <div class="w3-third w3-hover-shadow w3-light-grey w3-bordered"> <table class="w3-table w3-bordered w3-striped"> <tr> <th class="w3-center w3-padding-24"> <h5>Консультирование с элементами психотерапии</h5> </th> </tr> <tr> <td class="w3-center w3-padding-24">Jill</td> </tr> <tr> <td class="w3-center w3-padding-24">Eve</td> </tr> <tr> <td class="w3-center w3-padding-24">Adam</td> </tr> <tr> <td class="w3-center w3-padding-24"> <button class="w3-btn w3-teal w3-padding-large">Подробнее</button> </td> </tr> </table> </div> <div class="w3-third w3-hover-shadow w3-light-grey w3-bordered"> <table class="w3-table w3-bordered w3-striped"> <tr> <th class="w3-center w3-padding-24"> <h5>Индивидуальная психотерапия</h5> </th> </tr> <tr> <td class="w3-center w3-padding-24">Jill</td> </tr> <tr> <td class="w3-center w3-padding-24">Eve</td> </tr> <tr> <td class="w3-center w3-padding-24">Adam</td> </tr> <tr> <td class="w3-center w3-padding-24"> <button class="w3-btn w3-teal w3-padding-large">Подробнее</button> </td> </tr> </table> </div> </div> 

    1 answer 1

    The simplest solution is to set a fixed height for the table header at a specific window width:

     @media screen and (max-width: 300px) { table > tr > th { min-height: 300px; } } 

    Select the width of the window and the height of the header specifically for your case.