Столбец таблицы HTML оставляет пустое пространство

Question

Я пытаюсь составить таблицу цен на моем сайте; однако в левой части таблицы в ее столбцах остается пустое место.

<h1>Pricing</h1>
    <table>
  <thead>
    <tr><th>Service/Item</th><th>Price (GBP)</th></tr>
  </thead>
  <tbody>
    <tr><td class="left"><h3>Full Diagnosis & Solution</h3></td><td>50.00</td></tr>
    <tr><td class="left"><h3>Low-End Glasses</h3></td><td>10</td></tr>
    <tr><td class="left"><h3>Mid-Range Glasses</h3></td><td>50</td></tr>
    <tr><td class="left"><h3>High-End Glasses</h3></td><td>65</td></tr>
    <tr><td class="left"><h3>Designer Glasses</h3></td><td>80</td></tr>
  </tbody>
</table>

Я попытался сделать столбцы растянутыми по двум строкам, чтобы не было пустого пространства, но это не решило проблему.

Изображение - https://imgur.com/a/wcKRF9d

Я бы хотел удалить пустое пространство, чтобы оно было желтым.

Answer 1

Без css, похоже, вы задали цвет фона для ваших букв вместо <td>. Вот рабочий фрагмент.

table {
  width: 80%;
  font-family: Helvetica, Arial, Sans-Serif;
}
thead th {
  font-weight: 600;
  text-align: left;
  color: #FFFFFF;
  background-color: #3b3b3b;
  padding: 10px 5px;
}
tbody td {
  background-color: #f0efe2;
  padding: 5px;
}
h3 {
  color: green;
}

<h1>Pricing</h1>
<table>
  <thead>
    <tr>
      <th>Service/Item</th>
      <th>Price (GBP)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="left">
        <h3>Full Diagnosis & Solution</h3>
      </td>
      <td>50.00</td>
    </tr>
    <tr>
      <td class="left">
        <h3>Low-End Glasses</h3>
      </td>
      <td>10</td>
    </tr>
    <tr>
      <td class="left">
        <h3>Mid-Range Glasses</h3>
      </td>
      <td>50</td>
    </tr>
    <tr>
      <td class="left">
        <h3>High-End Glasses</h3>
      </td>
      <td>65</td>
    </tr>
    <tr>
      <td class="left">
        <h3>Designer Glasses</h3>
      </td>
      <td>80</td>
    </tr>
  </tbody>
</table>

Answer 2

Просматривая снимок экрана, я вижу, что вы, возможно, добавили стили где-то в своем коде к h3,

попробуйте указать ширину: 100% к вашему h3

или просто написав это в ваших стилях:

tbody tr td h3{
    widht :100% 
}

или удалите этот стиль из тега h3

display: inline-block;