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添加了样式，

试着给你的h3设置宽度: 100%

或者简单地在你的风格中写下：

tbody tr td h3{
    widht :100% 
}

或者从h3标记中删除此样式

display: inline-block;