I trust all is well with you.
I'm having trouble adjusting the width of one of my table data cells. In the image attached below, you'll notice that my + icon is the same size as the other columns. I'd like to make it much narrower and position it next to the left column.
This is the current setup:
HTML:
<thead>
<tr>
<th><h1></h1></th>
<th><h1></h1></th>
<th><h1>TITLE</h1></th>
<th><h1>TITLE</h1></th>
</tr>
</thead>
<tbody>
<tr style="background-color: #eee;">
<td onclick="showPleaseHide()" id="trCheck" style="background-color: #eee; transition:box-shadow 0.2s ease-out; text-align: left;">Enrollment Fee</td>
<td class="plusButton"><span class="down1"><i style="color: orange;" class="fa fa-plus"></i></span></td>
<td>US $0</td>
<td>US $450</td>
</tr>
<tr class="active" id="hide1">
<td style="color: white; background-color: rgb(140, 167, 241);"></td>
</tr>
CSS:
.container2 th h1 {
font-weight: bold;
font-size: 1em;
text-align: center;
color: black;
}
.container2 td {
font-weight: normal;
font-size: 0.9em;
-webkit-box-shadow: 0 2px 2px -2px #0E1119;
-moz-box-shadow: 0 2px 2px -2px #0E1119;
box-shadow: 0 2px 2px -2px #0E1119;
}
.container2 {
text-align: center;
overflow: hidden;
width: 70%;
margin: 0 auto;
display: table;
padding: 0 0 8em 0;
}
.container2 td, .container2 th {
padding-bottom: 2%;
padding-top: 2%;
padding-left: 5%;
}
Appreciate your help in advance. Apologies if this seems basic, but I could use some guidance on this matter.