Как сделать 1 из 4 столбцов более узкими?

Question

Надеюсь, у вас все хорошо.

Я не могу понять, как сделать один из моих тд более узким, чем другие. На картинке, которую я прикрепил ниже, вы можете видеть, что мой значок + имеет такой же размер, как и другие столбцы. Я хочу сделать его очень узким и располагаться рядом с левым столбцом.

Вот что у меня есть:
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%;  

}

Заранее спасибо и извините, если это звучит как базовый c, но я не знаю, что делать.

Answer 1

Есть два способа сделать это. Сначала поделюсь самым простым:

Просто поставьте знак + в первом столбце, просто добавьте пробелы, если нужно ... (я знаю, очень просто).

Вот так:

<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  <i style="color: orange;" class="fa fa-plus"></i></td>
          <td>US $0</td>
          <td>US $450</td>
          </tr>

Вариант 2:

Используйте уже назначенный класс «plusButton», чтобы уменьшить пространство между границей и знаком +.

HTML:

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

Это был код из вашего исходного примера. Теперь CSS:

.plusButton {

    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

Надеюсь, все получится :)