How to set a maximum height for an HTML table?

I currently have a table in HTML that looks like this.

            <div class="tables">
              <table>
              <tr>
                <th>Name</th>
                <th>Industry</th>
                <th>Does the company identify that climate-related performance is factored into the overall board or executive leadership compensation</th>
                <th>Last updated</th>
              </tr>
              <tr>
                <td>BP</td>
                <td>Oil & Gas</td>
                <td>Yes</td>
                <td>2020-11-28</td>
              </tr>
              </table>
            </div>

The problem is that if I have a column with a long header but a short value then the header column becomes very short (like the column that says "Does the company identify..." with the value of "Yes") and the text doesn't look that great. My idea was to specify a maximum height for the table so that it's forced to expand the width of the columns in order to fit all the text in. The problem is that in CSS when I set display: block and then max-height for the table, it doesn't work at all. The columns in the table don't become wider and the whole thing just becomes a mess. Is there any way to force the columns in the table to become wider in order to fit in all of the text?

Solution

You can set the height of your table as the height of whole viewport to have everytime the maximum height and adjust the width of the colums by adding the style css code in the header

<!DOCTYPE html>
<html>
<head>
<style>
table{
    height:100vh;
}
td,th {
    border: 1px solid #000;
}
tr td:last-child {
    width: 1%;
    white-space: nowrap;
}
</style>
</head>
<body>
    <div class="tables">
      <table>
      <tr>
        <th>Name</th>
        <th>Industry</th>
                <th>Does the company identify that climate-related performance is factored into the overall board or executive leadership compensation</th>
        <th>Last updated</th>
      </tr>
      <tr>
        <td>BP</td>
        <td>Oil & Gas</td>
        <td>Yes</td>
        <td>2020-11-28</td>
      </tr>
      </table>
    </div>
</body> 
</html>

With this, you fill the width and the viewport height.

You shall take away height:100vh; if you do not want to fill the whole viewport height.

Like this :

or you can do :

tr td:last-child {
    overflow: hidden;
}

to obtain the display below (but this will not fill the whole width of the viewport instead of the first display)