CODEWITHSUNDEEP
htmlcsshtml-table
MarksCode
MarksCode

Reputation: 8604

First column of table takes up too much width?

I'm trying to make a two column table of questions and answers. The first column should just contain the question number so that the actual question and answer are aligned in the second column.

However, I want the question number to be right next to the question so that it all looks like one sentence. For some reason the first column that contains the number takes up too much width.

How do I make it only take up the width it needs?

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

Upvotes: 2

Views: 908

Answers (1)

Jack Bashford
Jack Bashford

Reputation: 44135

It's because your

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

is also in that column, and it's taking up a lot of room. A way to solve this is take that out of the table. Revised version below:

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

Another issue you might have is that your <tr> tags aren't working together with your question/answer alignment. Try making a quick plan of your table first, as they're actually quite hard to get right.

Upvotes: 2

Related Questions