为什么我不能设置表格数据行的高度，但可以设置表格标题的高度？答案

【问题标题】：Why can't I set the height of my table data rows, but can set the height of my table headers?为什么我不能设置表格数据行的高度，但可以设置表格标题的高度？
【发布时间】：2023-01-14 07:41:06
【问题描述】：

我已经尝试了我能找到的所有解决方案，但最接近统一行高的是编辑表格标题的高度，表格数据行不会改变它们的高度，无论我改变什么。

我的 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>

我的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;
}

【问题讨论】：

在您的 CSS 中，您使用 class(.fields) 来设置表格样式，但在 HTML 中您没有使用 class？请检查并清除这个

标签： html css

【解决方案1】：

您所要做的就是编写一个针对tr的样式：

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 {
  height: 100px;
}

<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>

【讨论】：