Is the first column of the table occupying excessive width?

I am attempting to create a table with two columns for questions and answers. The first column should only display the question number, aligning the actual question and answer in the second column.

However, I prefer the question number to be next to the question text to form one cohesive sentence. Unfortunately, the first column containing the number is occupying more width than necessary.

Is there a way to adjust the width of the first column to only take up the space it requires?

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

htmlcsshtml-table

Answer №1

The reason for this problem is due to the 

<td class="title">FAQ</td>
tag being in the same column, causing it to take up unnecessary space. To resolve this issue, consider removing it from the table and use the updated 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 potential issue could be the misalignment of your <tr> tags with the questions and answers. It's recommended to plan out your table structure beforehand as tables can be tricky to format correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving images stored locally using HTML Xcode

Scenario: Developing an iOS app using Objective-C. I am attempting to load local HTML files that contain embedded images. The HTML files are located in a directory named pages. The images are stored in a separate directory called images. The project&apos ...

htmliosobjective-c

HTML5 full-screen API and its compatibility with different browsers

I'm curious to know the level of support for HTML5 full-screen API in popular browsers. Which is the earliest version of each browser that fully supports it? And for any browsers that don't (like IE I suppose), are there third-party libraries ava ...

htmlfullscreen

My goal is to adjust the height of every text box on the page

Seeking guidance here. Within the webpage I'm developing, there are multiple 'Divs' containing 'text boxes' and 'background images' within them. I aim to adjust the height of each text box on the page. The height of each ...

javascriptjquerycss

The Malihu jQuery Custom Scrollbar integrated with Meteor is failing to display on the webpage

I have successfully integrated Malihu's custom scrollbar into my meteor app using this package: The code I'm using is as follows: Template.post.rendered = function() { $('body').mCustomScrollbar({ theme: 'minimal-dar ...

javascriptjqueryhtmlcssmeteor

Button inside form not triggering jQuery click event

Within a form, I have included a button that looks like this: <form> <input type="text" /> <input type="password" /> <button type="button" class="btn-login">Log in</button> </form> I want to activate the butt ...

javascriptjqueryhtmlformsclick

Exploring the depths of HTML with the Agility Pack

Looking to extract specific elements from my HTML code: <div id="mailbox" class="div-w div-m-0"> <h2 class="h-line">InBox</h2> <div id="mailbox-table"> <table id="maillist"> <tr> ...

c#htmlparsinghtml-agility-pack

How about trying out the magic of Bootstrap columns?

My issue pertains to bootstrap columns. Whenever I zoom in on the browser, the columns start overlapping and the text from col-md-7 ends up over the image. Does anyone know of a solution to this problem? <div class="row"> <div class="col-md-5 ...

htmlcssbootstrap-4

Error message: "Link binding error in knockout collection"

In this example, you'll find my Knockout ViewModel. $(document).ready( function () { var Incident = function (CaseNumber, DateOfIncident, Description) { this.CaseNumber = CaseNumber; this.DateOfIncident = DateOfIn ...

javascripthtmlmvvmknockout.js

Utilizing Python for Extracting Data from the NFL Section on ESPN's Website

Looking to extract historical NFL game results from the ESPN website using Python for further analysis? Currently, facing an issue with adding dates to the extracted data before saving it in a CSV file. Below you can find the link to the NFL webpage where ...

pythonhtmlweb-scrapingbeautifulsoup

How can the pixels of an image be transformed into an S-curve shape using canvas?

Could someone assist me with transforming straight lines in an image into S-curves? I have successfully implemented C-type curves using canvas properties, but am struggling to create S-curves. The image I am working with can be found here. Any guidance or ...

htmlcanvashtml5-canvasbezier

Filtering data within a specific date range on an HTML table using JavaScript

I am attempting to implement a date filtering feature on my HTML table. Users should be able to input two dates (From and To) and the data in the "Date Column" of the table will be filtered accordingly. The inputs on the page are: <input type="date" i ...

javascripthtmlhtml-table

Access menu options by hovering over the image

I am looking to create a hidden menu that only appears when I hover over an image. I attempted to follow a solution on Stackoverflow, but it did not work for me. Is there a way to achieve this using just CSS? Html: <nav class="navbar navbar-inverse na ...

htmlcssimagemenuhover

Is there a way to incorporate the use of quotation marks within the ng-bind directive in AngularJS?

Is there a way to insert phoneNo["phoneno"] into an HTML input using the ng-bind directive in Angular? While {{phoneNo["phoneno"]}} can display the data, it results in a syntax error when I try to put it like this: <input class="form-control" type="t ...

htmlangularjshtml-inputng-bind

Embed Zoom Video Without Any Cropping

Attempting to integrate the iPhone Simulator from into our website. Successfully set up a form for users to input their URL, which will then be displayed on a mobile browser via the simulator. However, the size of the embedded simulator is too large for ...

jqueryhtmlcssajaxiframe

Make sure that the two rows in my Bootstrap table are consistently positioned next to each other, regardless of the length of the text

When working with a Bootstrap panel containing text inside a table, I've encountered a challenge. One side features links while the other displays descriptions. At times, I find myself having to artificially lengthen the text to ensure it aligns corre ...

cssbootstrap-4

The relationship between elements and text input positioning

I am faced with a unique challenge. As a user types in an input field, I need to display a reset button positioned center right of the input. I must adhere to the current HTML structure for the label, input, button, and error message and I prefer not to r ...

htmlcss

Ways to avoid extra function loads in JavaScript

I'm currently working on an instant search feature and have some code implemented: $(function() { var timer; $("#searchterm").on('keypress',function() { timer && clearTimeout(timer); timer = setTimeout(doStuff, 800); tim ...

javascriptjqueryhtmlajax

Conceal a component when the succeeding one appears on a separate line

I'm looking for a solution to display an address on a webpage in two different formats based on the length. The first format should be: Street Number, PostalCode City If the address is too long to fit on one line, it should be displayed as: Street ...

csscss-float

Exporting Table Data from a Website using Python and Selenium WebDriver to Excel

I am currently working on a project that involves scraping data from a table on a specific website. Unfortunately, due to login requirements for this site being company-specific, I have opted to use Selenium. In the HTML code, I have successfully located t ...

pythonpandasseleniumhtml-table

Customize the appearance of the datepicker on the span element

Is it possible to apply a unique style to the datepicker located within a specific span element? Currently, selecting the text box copies the style with the red font applied to it. I am looking for a way to exclusively style the datepicker enclosed withi ...

javascriptjquerycssstyles