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