Increase width of first column in HTML/CSS table only - css-tables

Question

I have a basic table built from a table generator.
I need to increase the size of the first table column only. However the code below increases the first and fourth column.
CSS
table.paleBlueRows {
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #FFFFFF;
width: 85%;
height: 200px;
text-align: center;
border-collapse: collapse;
}
table.paleBlueRows td, table.paleBlueRows th {
border: 1px solid #0B6FA4;
padding: 3px 2px;
}
table.paleBlueRows tbody td {
font-size: 13px;
}
table.paleBlueRows td:nth-child(even) {
background: #D0E4F5;
}
table.paleBlueRows thead {
background: #0B6FA4;
border-bottom: 3px solid #FFFFFF;
}
table.paleBlueRows thead th {
font-size: 17px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
border-left: 2px solid #FFFFFF;
border-TOP: 2px solid #FFFFFF;
}
table.paleBlueRows thead th:first-child {
border-left: none;
width: 8em;
min-width: 8em;
max-width: 8em;
}
table.paleBlueRows tfoot td {
font-size: 14px;
}
The below code controls the column width
}
table.paleBlueRows thead th:first-child {
border-left: none;
width: 8em;
min-width: 8em;
max-width: 8em;
}
Can anyone assist with increasing the first column only?
Here is the CODEPEN

Answer 1

It is increasing the width of the 1st titled Package because you're using the CSS selector table.paleBlueRows thead th:first-child.
Although, the 4th column is also being affected because you have a rowspan and the column Each is also selected - it's the first column of the spanned row.
To fix this problem you can use the selector table.paleBlueRows td:first-child that affects only the 1st td element of your table row.
Replace:
table.paleBlueRows thead th:first-child {
border-left: none;
width: 8em;
min-width: 8em;
max-width: 8em;
}
With:
table.paleBlueRows td:first-child {
border-left: none;
width: 8em;
min-width: 8em;
max-width: 8em;
}
Please check my reviewed pen: https://codepen.io/Rechousa/pen/mXXPwW

Answer 2

What about just making those two changes:
Assign the #first id to your first row.
<th id="first" rowspan="2">Package</th>
Change the name of your table.paleBlueRows thead th:first-child to:
#first {
border-left: none;
width: 8em;
min-width: 8em;
max-width: 8em;
}