html - 表格的第一列占用太多宽度？

Question

我正在尝试制作一个包含两列问题和答案的表格。第一列应仅包含问题编号，以便实际问题和答案在第二列中对齐。

但是，我希望问题编号紧挨着问题，这样看起来就像一个句子。由于某种原因，包含数字的第一列占用了太多宽度。

如何让它只占用它需要的宽度？

.title {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .3px;
  padding-bottom: 32px;
  color: #333;
}

<table border="0" cellpadding="0" cellspacing="0" class="faq" width="666">
  <tbody>
    <tr>
      <td class="title">FAQ</td>
    </tr>
    <tr>
      <td class="question">1.</td>
      <td class="question">What happens when the wild tigers purr?</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td class="answer">Sixty-Four comes asking for bread. If Purple People Eaters are real… where do they find purple people to eat?</td>
    </tr>
  </tbody>
</table>

Answer 1

因为你的

<td class="title">FAQ</td>

也在该列中，它占用了很多空间。解决此问题的一种方法是将其从表中删除。修订版如下:

<div class="title">FAQ</div>    

<table border="0" cellpadding="0" cellspacing="0" class="faq" width="666">
    <tbody>
        <tr>
            <td class="question">1.</td>
            <td class="question">What happens when the wild tigers purr?</td>
        </tr>
        <tr>
           <td>&nbsp;</td>
           <td class="answer">Sixty-Four comes asking for bread. If Purple People Eaters are real… where do they find purple people to eat?</td>
        </tr>
    </tbody>
</table>

您可能遇到的另一个问题是您的 <tr>标签不能与您的问题/答案对齐一起使用。首先尝试快速规划您的餐 table ，因为它们实际上很难做到正确。