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 >
<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;
}
CodePudding user response:
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 >
<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>