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 计划，因为实际上很难做到正确。