padding issues with spacing between table elements

I currently possess a table.

          <table style="margin-left: 20px" class="tg">
            <tbody>
              <tr>
                <td class="tg- 0lax">Inquiry 1</td>
                   
              </tr>
              <tr>
                <td class="tg-0lax">Response 1</td>
              </tr>
              <tr>
                <td class="tg- 0lax">Inquiry 2</td>
             </tr>
            <tr>
                <td class="tg- 0lax">Solution 2</td>
             </tr>

I am interested in having a 2px margin between question 1 and response 1, as well as a 10px margin between response 1 and inquiry 2. I've attempted to implement this using styles such as margin-bottom/margin-top within the td tag, as well as padding set to 2px, but without success.

htmlcss

Answer №1

<td></td> and <tr></tr> should not have a margin applied to them. However, you can add padding when you set the display: block; property. You can then customize it further by setting different paddings for alternating rows. Here is a simple example with basic styles:

tr {
  display: block;
}

tr:nth-child(even) {
  padding-bottom: 20px;
}

tr:nth-child(odd) {
  padding-bottom: 2px;
}
<table>
  <tbody>
    <tr>
      <td>Question 1</td>
    </tr>
    <tr>
      <td>Answer 1</td>
    </tr>
    <tr>
      <td>Question 2</td>
    </tr>
    <tr>
      <td>Answer 2</td>
    </tr>
  </tbody>
</table>

Answer №2

To create a table with a border-spacing of 2px and then skip 5 rows to achieve a spacing of 10px, follow this example:

    <table style="margin-left: 20px;border-spacing: 2px;" class="tg">
        <tbody>
          <tr>
            <td class="tg- 0lax" >Question 1</td>
          </tr>
          <tr>
            <td class="tg-0lax">Answer 1</td>
          </tr>
          <tr>
            <td class="tg-0lax"></td>
          </tr>
          <tr>
            <td class="tg-0lax"></td>
          </tr>
          <tr>
            <td class="tg-0lax"></td>
          </tr>
          <tr>
            <td class="tg-0lax"></td>
          </tr>
          <tr>
            <td class="tg-0lax">Question 2</td>
          </tr>
          <tr>
            <td class="tg-0lax">Answer 2</td>
          </tr>

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

Using the `not()` CSS selector to target specific children elements

Is there a way to add a specific attribute to all input[type=text] elements while excluding certain elements that do not have a class but their parent does? Here is an example of the HTML structure: <tr class="filters"> <td> <i ...

csscss-selectors

Seeking a window-adjustable table with stationary headers

I have been searching high and low for a solution to my issue but have come up empty-handed. My goal is to create a table with fixed headers that remain visible while scrolling through the rest of the table. The catch is, I also need it to align properly w ...

javascriptjquerycsshtml-tablefixed-header-tables

The submit button functions solely as a hyperlink to an anchor

Check out this code I have: <form enctype="multipart/form-data" id="search_form" name="search_form" action="thisfile.php#anchorname" method="get"> <!-- Numerous search fields are here --> <input name="search" type="submit" value="Search" ...

phphtmlcross-browser

Tips for adjusting the value of a textbox up and down

I am facing an issue with my booking flight form that is supposed to take input from users regarding the number of travelers. I have three textboxes for Adult, Children, and Infants respectively, along with a main textbox to display the final result. Howev ...

javascriptjqueryhtmlcss

Eliminating border styles alters the overall appearance of the page

I'm encountering an issue with my HTML/CSS code here: CSS * { padding: 0; margin: 0; border: none; outline: none; } #container { margin: 10px auto 10px auto; width: 960px; background-color: #dddddd; border: solid 1px black; } #contai ...

htmlcss

JavaScript Magic: Hide Div when Clicking Away

I need a solution where clicking outside of the My DIV with the ID Container_ID will hide all elements within the Container by setting their style to display: none;. Currently, the JavaScript code I am using partially achieves this functionality, but it al ...

javascriptcss

Deployed on Azure: Correcting the Mime Type issue causing a blank css file to be sent to the server

While everything works perfectly fine locally, an issue arises when the application is deployed to Azure. The problem lies in loading the CSS file and an error message stating "Resource interpreted as Stylesheet but transferred with MIME type text/plain" i ...

cssasp.net-corestatic-files

What could be causing my browser to display twice the height value?

After running the code below on my browser, I noticed that the height value is rendered double. To start off, I tested the following code in about:blank. In the HTML: ... <canvas id="canvasArea" style=" width: 500px; height: ...

javascripthtmlcanvasmicrosoft-edge

Can Bootstrap be used to display a customized navbar on specific devices, while showing a different navbar on smaller screens?

Hello everyone, I have a quick and specific question. Currently, I have created a custom navbar (see image below). However, I want this navbar to be deactivated when the screen size is too small and instead show a regular navbar at the top. Is it achievabl ...

htmlcssbootstrap-4navbar

It is my desire to develop a forum featuring a graphical representation or visual aid showcasing the total number of active members within the community

I'm exploring the idea of adding a visual representation, like a graph, to display the number of members in a forum. Can anyone recommend a platform or service that would allow me to create an interactive graph showing the total membership count in a ...

htmlgraphforummybb

HTML: Align DIV contents next to each other without any overlap

Below are three boxes displayed. Boxes 1 and 3 appear fine, but in box 2 the text content is overlapping. The issue lies with the <div> having the class .vertical_center.grade_info which has a specific margin-left of 100px, causing the overlap. I ne ...

htmlcssuser-interface

Display three bootstrap cards in each row using a template loop

How can I display my cards vertically one by one as shown below? https://i.sstatic.net/5bsS2.png The current code I have lists the cards horizontally. How can I modify it to list them vertically? {% extends 'base_content.html' %} {% block conte ...

htmltwitter-bootstrapbootstrap-4django-templatesjinja2

Tips for aligning spin.js spinner in the center of a bootstrap 3 modal?

I'm attempting to showcase and center the spin.js spinner within a Bootstrap 3 modal. Despite successful implementation in IE and FF using the code below, I am encountering issues in Chrome, Safari Desktop, Chrome IOS, Safari IOS. The problem appears ...

htmltwitter-bootstrapmodal-dialogspinnertwitter-bootstrap-3

Tips for preventing an element from scrolling horizontally along with the page body

This is the structure of my HTML: <div class='header-wrapper'> <div class='title'>Title</div> </div> <div class='some-wide-content'> </div> Let's imagine a scenario where the br ...

htmlcss

What is the best way to display a 404 error page for a nonexistent child page on a WordPress site?

After building our site with WordPress, I noticed that non-existent child page routes are not being redirected. For instance, let's say we have a page called about-us with the URL http://example.com/about-us. If I try to access a non-existing child p ...

javascriptphphtmlcsswordpress

Is there a way to reset the yAxes count of a chart.js chart in Angular when changing tabs?

I am currently using chart.js within an Angular framework to visually display data. Is there any method available to reset the y-axis data when changing tabs? Take a look at this Stackblitz demo for reference. Upon initial loading of the page, the data ...

htmlangulartypescriptchart.js

Identify a duplicate class name element using Selenium

<ul class="k9GMp "> <li class="Y8-fY "><span class="-nal3 "><span class="g47SY ">2</span> posts</span> </li> <li class="Y8-fY "><a class="-nal3 " href="/username/followers/" tabindex="0"><span ...

pythonhtmlseleniumclasshref

Is there a way to separate and enhance the amplify-authenticator styles on their

To ensure that the <amplify-authenticator> component has the appropriate styles, I followed the steps outlined in this guide: https://github.com/aws-amplify/amplify-js/issues/1870 This involved installing @aws-amplify/ui and importing necessary styl ...

cssangularaws-amplify

Extract the date and time information from the API response

I have received a response array from an API that I need to work with. Take a look at the response below: [{createdBy:"user1", updatedDttm: "2022-01-20T07:31:35.544Z"}, {createdBy:"user2", updatedDttm: "2022-02-20T09:31:3 ...

htmlangularjstypescript

There is a lack of definition for an HTML form element in JavaScript

Encountering an issue with a HTML form that has 4 text inputs, where submitting it to a Javascript function results in the first 3 inputs working correctly, but the fourth being undefined. Highlighted code snippet: The HTML section: <form action="inse ...

javascripthtml