Home Why can't I set the height of my table data rows, but can set the height of my table headers?

Questions

Why can't I set the height of my table data rows, but can set the height of my table headers?

January 13, 2023

I’ve tried all the solutions I can find but the closest I can get to a uniform row height is editing the height of my table headers, the table data rows won’t change their height, no matter what I change.

My HTML:

<div class="fields">
            <table>
                <tr>                                   
                    <th>Year</th>
                    <th id="clickable" onclick="openPopup('f2')">Yield/Year</th>
                    <th id="clickable" onclick="openPopup('f3')">Yield/Year*3</th>
                    <th id="clickable" onclick="openPopup('f4')">Yield/Year*3*4</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>387.58</td>
                    <td>1162.74</td>
                    <td>4650.96</td>
                </tr>
            </table>
</div>

My CSS:

.fields table {
    width: auto;
    table-layout: fixed;
    border-collapse: collapse;
    white-space: nowrap;
}

.fields td {
    font-family: Arial, sans-serif;
    color: #213B54;
    font-size: 16px;
    border-right: 2px solid #213B54;
    border-bottom: 2px solid #213B54;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fields th {
    font-family: Arial, sans-serif;
    font-size: 16px;
    border-right: 2px solid #213B54;
    border-bottom: 2px solid #213B54;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
    background-color: #9bdcdf;
    color: #067A9F;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 75px;
    height: 10px;
}

>Solution :

All you should have to do is write a style that targets tr, optionally with classes to differentiate between your header and data rows.

EDIT: By the way, I just noticed that you have the same ID on multiple elements. IDs should uniquely identify a single element. To apply styles to multiple elements, you should use classes.

table {
  width: auto;
  table-layout: fixed;
  border-collapse: collapse;
  white-space: nowrap;
}

td {
  font-family: Arial, sans-serif;
  color: #213B54;
  font-size: 16px;
  border-right: 2px solid #213B54;
  border-bottom: 2px solid #213B54;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

th {
  font-family: Arial, sans-serif;
  font-size: 16px;
  border-right: 2px solid #213B54;
  border-bottom: 2px solid #213B54;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 2px;
  padding-right: 2px;
  text-align: center;
  background-color: #9bdcdf;
  color: #067A9F;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 75px;
  height: 10px;
}

tr.table-header {
  height: 50px;
}

tr.table-data {
  height: 100px;
}

<table>
  <tr class="table-header">
    <th>Year</th>
    <th id="clickable" onclick="openPopup('f2')">Yield/Year</th>
    <th id="clickable" onclick="openPopup('f3')">Yield/Year*3</th>
    <th id="clickable" onclick="openPopup('f4')">Yield/Year*3*4</th>
  </tr>
  <tr class="table-data">
    <td>1</td>
    <td>387.58</td>
    <td>1162.74</td>
    <td>4650.96</td>
  </tr>
</table>